增加权限判断，error-page

src/components/layout/header.vue

@@ -52,7 +52,12 @@ export default {
     },
     async logout() {
       await this.$store.dispatch('logout')
-      this.$router.push(`/${this.$route.fullPath}`)
+      let path = this.$route.fullPath
+      if (path.includes('error-page')) {
+        path = '/calendar'
+      }
+      console.log(path)
+      this.$router.push(path)
     }
   }
 }

src/pages/error-page/401.vue

+<template>
+  <div class="401 page_container">
+    <div class="img">
+      <img src="@/assets/images/401.gif">
+    </div>
+    <p>很抱歉，您没有权限去该页面，请获取权限后再访问...</p>
+    <div class="btn-bar">
+      <el-button type="primary" @click="back" size="small">返回上一页</el-button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    back() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+<style scoped>
+.page_container{
+  text-align:center;
+}
+.img{
+  padding-top:10px;
+  text-align:center;
+}
+p{
+  font: 24px/100px Arial,Helvetica,Microsoft YaHei;
+  color: #3f3b3a;
+  text-align:center;
+}
+</style>
\ No newline at end of file

src/pages/error-page/404.vue

+<template>
+  <div class="404 page_container">
+    <div class="img">
+      <img src="@/assets/images/404.png">
+    </div>
+    <p>很抱歉，您访问的页面不存在...</p>
+    <div class="btn-bar">
+      <el-button type="primary" @click="back" size="small">返回上一页</el-button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    back() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+<style scoped>
+.page_container{
+  text-align:center;
+}
+.img{
+  padding-top:50px;
+  text-align:center;
+}
+p{
+  font: 24px/100px Arial,Helvetica,Microsoft YaHei;
+  color: #3f3b3a;
+  text-align:center;
+}
+</style>
\ No newline at end of file

src/router/routes.js

@@ -92,7 +92,7 @@ export default [
         path: 'account',
         name: 'Account',
         component: () => import('@/pages/tencent/account/index'),
-        meta: { title: '账号管理', icon: 'el-icon-key' }
+        meta: { title: '账号管理', icon: 'el-icon-key', roles: ['administrator'] }
       }
     ]
   },
@@ -119,19 +119,28 @@ export default [
         meta: { title: '搜索' }
       }
     ]
-  }
+  },
+  {
+    path: '/error-page',
+    component: Layout,
+    redirect: '/error-page/404',
+    name: 'ErrorPage',
+    meta: { title: '访问出错', icon: 'el-icon-setting' },
+    hidden: true,
+    children: [
+      {
+        path: '404',
+        name: '404',
+        component: () => import('@/pages/error-page/404'),
+        meta: { title: '404', icon: '' }
+      },
+      {
+        path: '401',
+        name: '401',
+        component: () => import('@/pages/error-page/401'),
+        meta: { title: '401', icon: '' }
+      }
+    ]
+  },
+  { path: '*', redirect: '/error-page', hidden: true }
 ]
-// export default [
-//   { path: '*', redirect: '/index' },
-//   {
-//     path: '/',
-//     component: Layout,
-//     children: [
-//       /* 首页 */
-//       { path: '/index', component: () => import(/* webpackChunkName: "home" */ '@/pages/home') },
-//       { path: '/calendar', component: () => import(/* webpackChunkName: "calendar" */ '@/pages/calendar') },
-//       { path: '/system', component: () => import(/* webpackChunkName: "system" */ '@/pages/system') },
-//       { path: '/create-live', component: () => import(/* webpackChunkName: "create-live" */ '@/pages/create-live') }
-//     ]
-//   }
-// ]

src/utils/beforeEnter.js

 import store from '@/store'
+import router from '@/router'
 /**
  * Use meta.role to determine if the current user has permission
  * @param roles
@@ -18,20 +19,27 @@ export default class BeforeEnter {
 
   async update(to, from, next) {
     const isLogin = store.state.user.isLogin || (await store.dispatch('checkLogin'))
-    const hasRoles = store.state.user.hasRoles || (await store.dispatch('checkRoles'))
     const loginUrl = `${webConf.others.loginUrl}?rd=${encodeURIComponent(window.location.href)}`
-    if (!isLogin || !hasRoles) {
+    if (!isLogin) {
       window.location.href = loginUrl
-      // next(loginUrl)
-      return
+      next()
     } else {
-      const roles = store.state.user.roles.map(item => item.name)
-      if (!hasPermission(roles, to.meta.roles)) {
-        // next(loginUrl)
+      const hasRoles = store.state.user.hasRoles || (await store.dispatch('checkRoles'))
+      if (hasRoles) {
+        if (to.path.includes('error-page')) {
+          next()
+        } else {
+          const roles = store.state.user.roles.map(item => item.name)
+          console.log(roles)
+          if (!hasPermission(roles, to.meta.roles)) {
+            // next(loginUrl)
+            router.push('/error-page/401')
+          }
+          next()
+        }
+      } else {
         window.location.href = loginUrl
-        return
       }
-      next()
     }
     next()
   }