From 7880389033b593080e5bfc15c9b3ede5bdb8b16b Mon Sep 17 00:00:00 2001
From: lin-xin <2981207131@qq.com>
Date: Thu, 19 Apr 2018 19:25:47 +0800
Subject: [PATCH] =?UTF-8?q?'=E6=96=B0=E5=A2=9E403=E9=A1=B5=E9=9D=A2'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Sidebar.vue  |  5 +++
 src/components/page/403.vue        | 56 ++++++++++++++++++++++++++++++
 src/components/page/404.vue        |  2 +-
 src/components/page/Permission.vue |  2 +-
 src/main.js                        |  2 +-
 src/router/index.js                |  8 +++++
 6 files changed, 72 insertions(+), 3 deletions(-)
 create mode 100644 src/components/page/403.vue

diff --git a/src/components/common/Sidebar.vue b/src/components/common/Sidebar.vue
index 5bc621c..cfeeadf 100644
--- a/src/components/common/Sidebar.vue
+++ b/src/components/common/Sidebar.vue
@@ -77,6 +77,11 @@
                         icon: 'el-icon-warning',
                         index: 'permission',
                         title: '权限测试'
+                    },
+                    {
+                        icon: 'el-icon-error',
+                        index: '404',
+                        title: '404页面'
                     }
                 ]
             }
diff --git a/src/components/page/403.vue b/src/components/page/403.vue
new file mode 100644
index 0000000..73cc3bb
--- /dev/null
+++ b/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>
diff --git a/src/components/page/404.vue b/src/components/page/404.vue
index 149ad7d..55d102b 100644
--- a/src/components/page/404.vue
+++ b/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>
diff --git a/src/components/page/Permission.vue b/src/components/page/Permission.vue
index 0a20b7f..746b8b4 100644
--- a/src/components/page/Permission.vue
+++ b/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>
 
diff --git a/src/main.js b/src/main.js
index b08d2f3..720f368 100644
--- a/src/main.js
+++ b/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'){
diff --git a/src/router/index.js b/src/router/index.js
index b5da3e3..7f99b2f 100644
--- a/src/router/index.js
+++ b/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'
+        }
     ]
 })
-- 
GitLab