0.0.6

src/layouts/SiderMenu.vue

@@ -27,6 +27,7 @@
  * SubMenu1.vue https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu1.vue
  * */
 import SubMenu from "./SubMenu";
+import { check } from "../utils/auth";
 export default {
   props: {
     theme: {
@@ -60,7 +61,10 @@ export default {
     },
     getMenuData(routes = [], parentKeys = [], selectedKey) {
       const menuData = [];
-      routes.forEach(item => {
+      for (let item of routes) {
+        if (item.meta && item.meta.authority && !check(item.meta.authority)) {
+          break;
+        }
         if (item.name && !item.hideInMenu) {
           this.openKeysMap[item.path] = parentKeys;
           this.selectedKeysMap[item.path] = [selectedKey || item.path];
@@ -88,7 +92,8 @@ export default {
             ...this.getMenuData(item.children, [...parentKeys, item.path])
           );
         }
-      });
+      }
+
       return menuData;
     }
   }

src/router.js

@@ -1,8 +1,12 @@
 import Vue from "vue";
 import Router from "vue-router";
+import findLast from "lodash/findLast";
+import { notification } from "ant-design-vue";
 import NProgress from "nprogress";
 import "nprogress/nprogress.css";
 import NotFound from "./views/404";
+import Forbidden from "./views/403";
+import { check, isLogin } from "./utils/auth";
 
 Vue.use(Router);
 
@@ -36,6 +40,7 @@ const router = new Router({
     },
     {
       path: "/",
+      meta: { authority: ["user", "admin"] },
       component: () =>
         import(/* webpackChunkName: "layout" */ "./layouts/BasicLayout"),
       children: [
@@ -64,7 +69,7 @@ const router = new Router({
           path: "/form",
           name: "form",
           component: { render: h => h("router-view") },
-          meta: { icon: "form", title: "表单" },
+          meta: { icon: "form", title: "表单", authority: ["admin"] },
           children: [
             {
               path: "/form/basic-form",
@@ -109,6 +114,12 @@ const router = new Router({
         }
       ]
     },
+    {
+      path: "/403",
+      name: "403",
+      hideInMenu: true,
+      component: Forbidden
+    },
     {
       path: "*",
       name: "404",
@@ -122,6 +133,24 @@ router.beforeEach((to, from, next) => {
   if (to.path !== from.path) {
     NProgress.start();
   }
+  const record = findLast(to.matched, record => record.meta.authority);
+  if (record && !check(record.meta.authority)) {
+    if (!isLogin() && to.path !== "/user/login") {
+      next({
+        path: "/user/login"
+      });
+    } else if (to.path !== "/403") {
+      notification.error({
+        message: "403",
+        description: "你没有权限访问，请联系管理员咨询。"
+      });
+      next({
+        path: "/403"
+      });
+    }
+    NProgress.done();
+  }
+
   next();
 });
 

src/utils/auth.js

@@ -0,0 +1,13 @@
+export function getCurrentAuthority() {
+  return ["user"];
+}
+
+export function check(authority) {
+  const current = getCurrentAuthority();
+  return current.some(item => authority.includes(item));
+}
+
+export function isLogin() {
+  const current = getCurrentAuthority();
+  return current && current[0] !== "guest";
+}

src/views/403.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>403</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>