权限设置

vue-admin-template-master/src/permission.js

@@ -1,33 +1,45 @@
-import router from './router'
-import store from './store'
-import { Message } from 'element-ui'
-import NProgress from 'nprogress' // progress bar
-import 'nprogress/nprogress.css' // progress bar style
-import { getToken } from '@/utils/auth' // get token from cookie
-import getPageTitle from '@/utils/get-page-title'
+import router from "./router";
+import store from "./store";
+import NProgress from "nprogress"; // progress bar
+import "nprogress/nprogress.css"; // progress bar style
+import { getToken } from "@/utils/auth"; // get token from cookie
+import getPageTitle from "@/utils/get-page-title";
 
-NProgress.configure({ showSpinner: false }) // NProgress Configuration
+NProgress.configure({ showSpinner: false }); // NProgress Configuration
 
-const whiteList = ['/login'] // no redirect whitelist
+const whiteList = ["/login"]; // no redirect whitelist
 
-router.beforeEach(async(to, from, next) => {
+router.beforeEach(async (to, from, next) => {
   // start progress bar
-  NProgress.start()
+  NProgress.start();
 
   // set page title
-  document.title = getPageTitle(to.meta.title)
+  document.title = getPageTitle(to.meta.title);
 
   // determine whether the user has logged in
-  const hasToken = getToken()
+  const hasToken = getToken();
   console.log(hasToken);
 
-  if (!!hasToken && typeof hasToken == 'string') {
-    if (to.path === '/login') {
+  if (!!hasToken && typeof hasToken == "string") {
+    if (to.path === "/login") {
       // if is logged in, redirect to the home page
-      next({ path: '/' })
-      NProgress.done()
+      next({ path: "/" });
+      NProgress.done();
     } else {
-      next()
+      const hasRoles = store.getters.roles && store.getters.roles.length > 0;
+      if (hasRoles) {
+        next();
+      } else {
+        const roles = await store.dispatch("user/setroles");
+        store.dispatch("GenerateRoutes", { roles }).then(() => {
+          // 生成可访问的路由表
+          router.options.routes = store.getters.addRouters;
+          router.addRoutes(store.getters.addRouters); // 动态添加可访问路由表
+          next({ ...to, replace: true }); // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
+        });
+      }
+
+      // next()
       // const hasGetUserInfo = store.getters.name
       // if (hasGetUserInfo) {
       //   next()
@@ -51,16 +63,16 @@ router.beforeEach(async(to, from, next) => {
 
     if (whiteList.indexOf(to.path) !== -1) {
       // in the free login whitelist, go directly
-      next()
+      next();
     } else {
       // other pages that do not have permission to access are redirected to the login page.
-      next(`/login?redirect=${to.path}`)
-      NProgress.done()
+      next(`/login?redirect=${to.path}`);
+      NProgress.done();
     }
   }
-})
+});
 
 router.afterEach(() => {
   // finish progress bar
-  NProgress.done()
-})
+  NProgress.done();
+});

vue-admin-template-master/src/router/index.js

@@ -100,19 +100,7 @@ export const constantRoutes = [
       }
     ]
   },
-  //优惠券
-  {
-    path: "/coupon",
-    component: Layout,
-    children: [
-      {
-        path: "index",
-        name: "Coupon",
-        component: () => import("@/views/coupon/index"),
-        meta: { title: "优惠券", icon: "el-icon-s-ticket" }
-      }
-    ]
-  },
+
   //下单
   {
     path: "/shopping",
@@ -320,6 +308,25 @@ export const constantRoutes = [
   { path: "*", redirect: "/404", hidden: true }
 ];
 
+export const asyncRouterMap = [
+  //优惠券
+  {
+    path: "/coupon",
+    component: Layout,
+    meta: {
+      role: ["用户"]
+    },
+    children: [
+      {
+        path: "index",
+        name: "Coupon",
+        component: () => import("@/views/coupon/index"),
+        meta: { title: "优惠券", icon: "el-icon-s-ticket" }
+      }
+    ]
+  }
+];
+
 const createRouter = () =>
   new Router({
     // mode: 'history', // require service support

vue-admin-template-master/src/store/getters.js

@@ -1,10 +1,12 @@
 const getters = {
   sidebar: state => state.app.sidebar,
   device: state => state.app.device,
-  token: state => state.userinfo.token,
-  avatar: state => state.userinfo.avatar,
-  name: state => state.userinfo.name,
-
-  userinfo: state => state.userinfo
-}
-export default getters
+  token: state => state.user.userinfo.token,
+  avatar: state => state.user.userinfo.avatar,
+  name: state => state.user.userinfo.name,
+  role: state => state.user.userinfo.role,
+  userinfo: state => state.user.userinfo,
+  roles: state => state.user.roles,
+  addRouters: state => state.permission.routers
+};
+export default getters;

vue-admin-template-master/src/store/index.js

@@ -1,19 +1,21 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-import getters from './getters'
-import app from './modules/app'
-import settings from './modules/settings'
-import user from './modules/user'
+import Vue from "vue";
+import Vuex from "vuex";
+import getters from "./getters";
+import app from "./modules/app";
+import settings from "./modules/settings";
+import user from "./modules/user";
+import permission from "./modules/permission";
 
-Vue.use(Vuex)
+Vue.use(Vuex);
 
 const store = new Vuex.Store({
   modules: {
     app,
     settings,
-    user
+    user,
+    permission
   },
   getters
-})
+});
 
-export default store
+export default store;

vue-admin-template-master/src/store/modules/user.js

@@ -7,7 +7,8 @@ const getDefaultState = () => {
     token: getToken(),
     name: "",
     avatar: "",
-    userinfo: {}
+    userinfo: {},
+    roles: []
   };
 };
 
@@ -28,10 +29,20 @@ const mutations = {
   },
   SET_USERINFO: (state, userinfo) => {
     state.userinfo = userinfo;
+  },
+  SET_ROLES: (state, roles) => {
+    state.roles = roles;
   }
 };
 
 const actions = {
+  setroles({ commit }) {
+    return new Promise((resolve, reject) => {
+      const roles = ["用户"];
+      commit("SET_ROLES", roles);
+      resolve(roles);
+    });
+  },
   // user login
   login({ commit }, userInfo) {
     const { username, password } = userInfo;
@@ -40,9 +51,10 @@ const actions = {
         .then(response => {
           const { data } = response;
           commit("SET_USERINFO", data);
-          console.log(data);
+
           localStorage.setItem("userinfo", JSON.stringify(data));
           setToken(data.openid);
+
           resolve();
         })
         .catch(error => {