devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue+Element UI 权限管理（角色 ）_elementui框架根据角色roles回显相关页面

作者：weixin_40725706 | 2024-07-30 10:23:18

赞

踩

elementui框架根据角色roles回显相关页面

用户前台登录后，后台返回一个token，将该token存储到store中，并设置到header中，每次发起请求时都会携带该token，用于后台进行权限校验

  1. // 登录方法 login.vue
  2.  handleLogin() {
  3.       this.$refs.loginForm.validate((valid) => {
  4.         if (valid) {
  5.           this.loading = true;
  6.           this.$store
  7.             .dispatch("user/login", this.loginForm)
  8.             .then(() => {
  9.               this.$router.push({ path: this.redirect || "/" });
  10.               this.loading = false;
  11.             })
  12.             .catch(() => {
  13.               this.loading = false;
  14.             });
  15.         } else {
  16.           console.log("error submit!!");
  17.           return false;
  18.         }
  19.       });
  20.     },

在store 的user.js中定义了该方法

  1.  login({ commit }, userInfo) {
  2.     const { userName, userPassword } = userInfo;
  3.     return new Promise((resolve, reject) => {
  4.       login({ userName: userName.trim(), userPassword: userPassword })
  5.         .then((response) => {
  6.           const { data } = response;
  7.           commit("SET_TOKEN", data.token);
  8.           setToken(data.token);
  9.           resolve();
  10.         })
  11.         .catch((error) => {
  12.           reject(error);
  13.         });
  14.     });
  15.   },
  16.  
  1. const mutations = {
  2.   RESET_STATE: (state) => {
  3.     Object.assign(state, getDefaultState());
  4.   },
  5.   SET_TOKEN: (state, token) => {
  6.     state.token = token;
  7.   },
  8.   SET_NAME: (state, name) => {
  9.     state.name = name;
  10.   },
  11.   SET_AVATAR: (state, avatar) => {
  12.     state.avatar = avatar;
  13.   },
  14.   SET_AUTHORITIES: (state, authorities) => {
  15.     state.authorities = authorities;
  16.   },
  17. };

此时登录成功后，后台将返回一个token

在请求拦截器中将token添加到请求头上，在响应拦截器中设置未登录状态访问时跳转到登录页面

  1. import axios from "axios";
  2. import { MessageBox, Message } from "element-ui";
  3. import store from "@/store";
  4. import { getToken, removeToken } from "@/utils/auth";
  5. import router from "@/router";
  6.  
  7. // create an axios instance
  8. const service = axios.create({
  9.   baseURL: "http://localhost:8080", // url = base url + request url
  10.   timeout: 5000, // request timeout
  11. });
  12.  
  13. // request interceptor
  14. service.interceptors.request.use(
  15.   (config) => {
  16.     if (store.getters.token) {
  17.       config.headers["token"] = getToken();
  18.     }
  19.     return config;
  20.   },
  21.   (error) => {
  22.     console.log(error);
  23.     return Promise.reject(error);
  24.   }
  25. );
  26.  
  27. //  response 拦截器
  28. service.interceptors.response.use(
  29.   (response) => {
  30.     const res = response.data;
  31.  
  32.     // if the custom code is not 20000, it is judged as an error.
  33.     if (res.code !== 200 && res.code !== 201) {
  34.       Message({
  35.         message: res.message || "Error",
  36.         type: "error",
  37.         duration: 5 * 1000,
  38.       });
  39.  
  40.       // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
  41.       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
  42.         // to re-login
  43.         MessageBox.confirm(
  44.           "You have been logged out, you can cancel to stay on this page, or log in again",
  45.           "Confirm logout",
  46.           {
  47.             confirmButtonText: "Re-Login",
  48.             cancelButtonText: "Cancel",
  49.             type: "warning",
  50.           }
  51.         ).then(() => {
  52.           store.dispatch("user/resetToken").then(() => {
  53.             location.reload();
  54.           });
  55.         });
  56.       }
  57.       if (res.code == 401) {
  58.         removeToken();
  59.         router.replace({
  60.           path: "/login",
  61.         });
  62.       }
  63.       return Promise.reject(new Error(res.message || "Error"));
  64.     } else {
  65.       return res;
  66.     }
  67.   },
  68.   (error) => {
  69.     console.log("err" + error); // for debug
  70.     Message({
  71.       message: error.message,
  72.       type: "error",
  73.       duration: 5 * 1000,
  74.     });
  75.     return Promise.reject(error);
  76.   }
  77. );
  78.  
  79. export default service;

 在permission.js 中进行相关代码编写 （获取用户的信息，动态路由的生成加载）

 router.beforeEach（）路由拦截（）

  1. import router from "./router";
  2. import store from "./store";
  3. import { Message } from "element-ui";
  4. import NProgress from "nprogress"; // progress bar
  5. import "nprogress/nprogress.css"; // progress bar style
  6. import { getToken } from "@/utils/auth"; // get token from cookie
  7. import getPageTitle from "@/utils/get-page-title";
  8.  
  9. NProgress.configure({ showSpinner: false }); // NProgress Configuration
  10.  
  11. const whiteList = ["/login"]; // no redirect whitelist
  12.  
  13. router.beforeEach(async (to, from, next) => {
  14.   // start progress bar
  15.   NProgress.start();
  16.  
  17.   // set page title
  18.   document.title = getPageTitle(to.meta.title);
  19.  
  20.   // determine whether the user has logged in
  21.   const hasToken = getToken();
  22.   const hasRoles =
  23.     store.state.user.authorities && store.state.user.authorities.length > 0;
  24.   // 如果有token再跳转到登录页面时，根据获取的角色信息进行页面跳转
  25.   if (hasToken) {
  26.     if (to.path === "/login") {
  27.       if (store.state.user.authorities) {
  28.         if (store.state.user.authorities.includes("ROLE_ADMIN")) {
  29.           next({ path: "/" });
  30.         } else {
  31.           next({ path: "/user" });
  32.         }
  33.       } else {
  34.         next({ path: "/" });
  35.       }
  36.       NProgress.done();
  37.     } else {
  38.       // 获取登录用户名 如果用户名存在说明用户已经登录且获得了用户信息，直接放行，如果没有用户名，就进行用户信息获取
  39.       const hasGetUserInfo = store.getters.name;
  40.       if (hasGetUserInfo) {
  41.         next();
  42.       } else {
  43.         try {
  44.           //判断用户角色是否存在
  45.           if (!hasRoles) {
  46.             let userInfo = await store.dispatch("user/getInfo"); // 获取用户信息
  47.             // 根据获得到的用户信息，获取用户角色信息并动态生成路由
  48.             let routes = await store.dispatch(
  49.               "permission/getAsyncRoutes",
  50.               userInfo.user.authorities
  51.             );
  52.             router.options.routes = routes;
  53.             router.addRoutes(routes); // 将生成的动态路由添加到原先的路由中
  54.             next({ ...to, replace: true }); // 保证路由已挂载
  55.  
  56.             // 根据用户角色进行登录后的首页面跳转
  57.             if (store.state.user.authorities) {
  58.               if (store.state.user.authorities.includes("ROLE_ADMIN")) {
  59.                 next({ path: "/" });
  60.               } else {
  61.                 next({ path: "/user/user" });
  62.               }
  63.             }
  64.           }
  65.         } catch (error) {
  66.           // remove token and go to login page to re-login
  67.           await store.dispatch("user/resetToken");
  68.           Message.error(error || "Has Error");
  69.           next(`/login`);
  70.           NProgress.done();
  71.         }
  72.       }
  73.     }
  74.   } else {
  75.     /* has no token*/
  76.     if (whiteList.indexOf(to.path) !== -1) {
  77.       // in the free login whitelist, go directly
  78.       next();
  79.     } else {
  80.       // other pages that do not have permission to access are redirected to the login page.
  81.       next(`/login`);
  82.       NProgress.done();
  83.     }
  84.   }
  85. });
  86.  
  87. router.afterEach(() => {
  88.   // finish progress bar
  89.   NProgress.done();
  90. });

获取用信息的方法定义在store的user.js中

  1.   // 获取用户信息
  2.   getInfo({ commit, state }) {
  3.     return new Promise((resolve, reject) => {
  4.       getInfo()
  5.         .then((response) => {
  6.           const { data } = response;
  7.           if (!data) {
  8.             return reject("Verification failed, please Login again.");
  9.           }
  10.           const { username, authorities } = data.user;
  11.           // 将用户名，和用户角色信息存储到store中
  12.           commit("SET_NAME", username); 
  13.           commit("SET_AUTHORITIES", authorities);
  14.           resolve(data);
  15.         })
  16.         .catch((error) => {
  17.           reject(error);
  18.         });
  19.     });
  20.   },

在store 的 permission.js 为动态路由的相关方法和存储 

  1. import { asyncRoutes, constantRoutes } from "@/router";
  2. /**
  3.  * 通过meta中的roles信息判断用户是否有权限
  4.  * @param roles
  5.  * @param route
  6.  */
  7. function hasPermission(roles, route) {
  8.   if (route.meta && route.meta.roles) {
  9.     return roles.some((role) => route.meta.roles.includes(role));
  10.   } else {
  11.     return true;
  12.   }
  13. }
  14.  
  15. /**
  16.  * 根据角色和配置生成当前用户的路由
  17.  * @param {array} routes 配置的路由
  18.  * @param {array} roles 用户角色
  19.  */
  20. let GenerateRoutes = (routes, roles) => {
  21.   let res = [];
  22.   routes.forEach((route) => {
  23.     const tmp = { ...route };
  24.  
  25.     if (hasPermission(roles, tmp)) {
  26.       if (tmp.children) {
  27.         tmp.children = GenerateRoutes(tmp.children, roles);
  28.       }
  29.       // console.log(tmp);
  30.       res.push(tmp);
  31.     }
  32.   });
  33.  
  34.   return res;
  35. };
  36.  
  37. const getDefaultState = () => {
  38.   return {
  39.     roles: [],
  40.     routes: constantRoutes, // 用于配置页面导航等
  41.   };
  42. };
  43. const state = getDefaultState();
  44. const mutations = {
  45.   SET_ROLES: (state, roles) => {
  46.     state.roles = roles;
  47.   },
  48.   SET_ROUTES: (state, routes) => {
  49.     state.routes = routes;
  50.   },
  51. };
  52.  
  53. const actions = {
  54.   /**根据角色获取路由配置 */
  55.   getAsyncRoutes({ commit }, roles) {
  56.     let filterRoutes = GenerateRoutes(asyncRoutes, roles);
  57.     let res = constantRoutes.concat(filterRoutes);
  58.     commit("SET_ROUTES", res);
  59.     return res;
  60.   },
  61. };
  62.  
  63. export default {
  64.   namespaced: true,
  65.   state,
  66.   mutations,
  67.   actions,
  68. };

将新增的js文件引入store的index.js文件中

  1. import Vue from "vue";
  2. import Vuex from "vuex";
  3. import getters from "./getters";
  4. import app from "./modules/app";
  5. import settings from "./modules/settings";
  6. import user from "./modules/user";
  7. import permission from "./modules/permission"; 
  8.  
  9. Vue.use(Vuex);
  10.  
  11. const store = new Vuex.Store({
  12.   modules: {
  13.     app,
  14.     settings,
  15.     user,
  16.     permission, 
  17.   },
  18.   getters,
  19. });
  20.  
  21. export default store;

路由文件

  1. import Vue from "vue";
  2. import Router from "vue-router";
  3.  
  4. Vue.use(Router);
  5.  
  6. /* Layout */
  7. import Layout from "@/layout";
  8.  
  9. // 默认路由
  10. export const constantRoutes = [
  11.   {
  12.     path: "/login",
  13.     component: () => import("@/views/login/index"),
  14.     hidden: true,
  15.   },
  16.   {
  17.     path: "/404",
  18.     component: () => import("@/views/404"),
  19.     hidden: true,
  20.   },
  21. ];
  22. // 自定义动态路由，在meta中添加了roles,通过roles中是角色进行动态生成不同角色的动态路由
  23. export const asyncRoutes = [
  24.   {
  25.     path: "/",
  26.     component: Layout,
  27.     redirect: "/employee",
  28.     meta: { roles: ["ROLE_ADMIN"] },
  29.     children: [
  30.       {
  31.         path: "employee",
  32.         name: "Employee",
  33.         component: () => import("@/views/employee/index"),
  34.         // meta: { title: "员工管理", icon: "el-icon-s-custom" },
  35.         meta: {
  36.           roles: ["ROLE_ADMIN"],
  37.           title: "员工管理",
  38.           icon: "el-icon-s-custom",
  39.         },
  40.       },
  41.     ],
  42.   },
  43.  {
  44.     path: "/user",
  45.     component: Layout,
  46.     meta: { roles: ["ROLE_DEPT", "ROLE_EMP"] },
  47.     children: [
  48.       {
  49.         path: "user",
  50.         name: "User",
  51.         component: () => import("@/views/user/index"),
  52.         meta: {
  53.           roles: ["ROLE_DEPT", "ROLE_EMP"],
  54.           title: "个人信息",
  55.           icon: "el-icon-setting",
  56.         },
  57.       },
  58.     ],
  59.   },
  60. // 404 page must be placed at the end !!!
  61.   { path: "*", redirect: "/404", hidden: true },
  62. ];
  63.  
  64. const createRouter = () =>
  65.   new Router({
  66.     // mode: 'history', // require service support
  67.     scrollBehavior: () => ({ y: 0 }),
  68.     routes: constantRoutes,
  69.   });
  70.  
  71. const router = createRouter();
  72.  
  73. // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
  74. export function resetRouter() {
  75.   const newRouter = createRouter();
  76.   router.matcher = newRouter.matcher; // reset router
  77. }
  78.  
  79. export default router;

 此时登录成功并获取到用户信息后，可在控制台看到存储到store中的信息

 登录成功界面实例

管理员

部门经理

基本员工

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/903307
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号