'新增403页面'

src/components/common/Sidebar.vue

@@ -77,6 +77,11 @@
                         icon: 'el-icon-warning',
                         index: 'permission',
                         title: '权限测试'
+                    },
+                    {
+                        icon: 'el-icon-error',
+                        index: '404',
+                        title: '404页面'
                     }
                 ]
             }

src/components/page/403.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="error-page">
+      <div class="error-code">4<span>0</span>3</div>
+      <div class="error-desc">啊哦~ 你没有权限访问该页面哦</div>
+      <div class="error-handle">
+          <router-link to="/readme">
+            <el-button type="primary" size="large">返回首页</el-button>
+          </router-link>
+          <el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+      goBack(){
+          this.$router.go(-1);
+      }
+  }
+}
+</script>
+
+
+<style scoped>
+    .error-page{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        background: #f3f3f3;
+        box-sizing: border-box;
+    }
+    .error-code{
+        line-height: 1;
+        font-size: 250px;
+        font-weight: bolder;
+        color: #f02d2d;
+    }
+    .error-code span{
+        color: #00a854;
+    }
+    .error-desc{
+        font-size: 30px;
+        color: #777;
+    }
+    .error-handle{
+        margin-top: 30px;
+        padding-bottom: 200px;
+    }
+    .error-btn{
+        margin-left: 100px;
+    }
+</style>

src/components/page/404.vue

@@ -3,7 +3,7 @@
       <div class="error-code">4<span>0</span>4</div>
       <div class="error-desc">啊哦~ 你所访问的页面不存在</div>
       <div class="error-handle">
-          <router-link to="/">
+          <router-link to="/readme">
             <el-button type="primary" size="large">返回首页</el-button>
           </router-link>
           <el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button>

src/components/page/Permission.vue

@@ -7,7 +7,7 @@
         </div>
         <div class="container">
             <h1>管理员权限页面</h1>
-            <p>只有用 admin 账号登录的才拥有管理员权限，才能进到这个页面，其他账号想进来都会跳到登录页面，重新用管理员账号登录才有权限。</p>
+            <p>只有用 admin 账号登录的才拥有管理员权限，才能进到这个页面，其他账号想进来都会跳到403页面，重新用管理员账号登录才有权限。</p>
             <p>想尝试一下，请<router-link to="/login" class="logout">退出登录</router-link>，随便输入个账号名，再进来试试看。</p>
         </div>
 

src/main.js

@@ -15,7 +15,7 @@ router.beforeEach((to, from, next) => {
     if(to.meta.permission){
         const role = localStorage.getItem('ms_username');
         // 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已
-        role === 'admin' ? next() : next('/login');
+        role === 'admin' ? next() : next('/403');
     }else{
         // 简单的判断IE10及以下不进入富文本编辑器，该组件不兼容
         if(navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor'){

src/router/index.js

@@ -75,5 +75,13 @@ export default new Router({
             path: '/404',
             component: resolve => require(['../components/page/404.vue'], resolve)
         },
+        {
+            path: '/403',
+            component: resolve => require(['../components/page/403.vue'], resolve)
+        },
+        {
+            path: '*',
+            redirect: '/404'
+        }
     ]
 })