2023年7月7日发(作者：)

Vue权限的三种实现⽅式（带源代码）⼏种⽅案对于后端返回来可选则的权限⽅案：plan1(branch:plan1): 返回路由 name 的是否可访问的表，例如：{page1:true,page2:true,page3:false}plan2(branch:plan2): 返回权限级别,⽐如:['admin','admin-delete','page1-all']，我们可以在路由表的 meta 中匹配⾓⾊plan3(branch:plan3): 返回完整的路由表，例如:{[{path: "/",name: "Home",component: 'Home',},},不能返回绝对路径，要返回 Home下⾯的代码中都有完整的功能注释⽅案⼀：后端返回此⽤户可以访问的路由的name的表代码如下src/import basicsRoutes from "./module/basicsRoutes";import { setTitle } from "../utils/router";import store from "../store";(VueRouter);const router = new VueRouter({ mode: "history", base: _URL, basicsRoutes,});Each((to, from, next) => { && setTitle(); let token = "..."; if (token) { if (!Rules) { // store // .dispatch("authorization") // .then((rules) => {

// 这⾥为后端返回的路由name的权限表 const rules = { Form: true, List: false, About: true }; // 在store 中处理⽣成完整的路由表 store .dispatch("concatRoutes", rules) .then((routers) => { // 合并路由表 tes(routers); next({ ...to, replace: true }); }) .catch(() => { next({ name: "login" }); }); // }) // .catch(() => { // token = ''; // next({ name: "login" }); // }); } else { next(); } } else { if ( === "login") next(); else next({ name: "login" }); }});export default router;src/store/module/router// 带权限的路由import asyncRoutes from "../../router/module/asyncRoutes";// 基础的路由import basicsRoutes from "../../router/module/basicsRoutes";const state = { routers: basicsRoutes,// 这⾥是[]也没事 hasGetRules: false,};const mutations = { CONCAT_ROUTES(state, routerList) { // 这⾥要注意路由表的前后问题 s = (basicsRoutes); Rules = true; },};const getAccesRouterList = (basicsRoutes, rules) => { return ((item) => { if (rules[]) { // 如果有⼦路由，就进⾏递归操作 if (en) en = getAccesRouterList(en, rules); return true; } else return false; });};const actions = { concatRoutes({ commit }, rules) { (rules); return new Promise((resolve, reject) => { try { let routerList = []; // (s(rules)); /* ["Form", true] ["List", false] ["About", false] */ // 如果所有页⾯都可以进⾏访问，则直接进⾏返回所有路由 if (s(rules).every((item) => item[1])) { routerList = asyncRoutes; } else { // 递归asyncRoutes，看哪些页⾯有权限访问 routerList = getAccesRouterList(asyncRoutes, rules); } commit("CONCAT_ROUTES", routerList); resolve(s); } catch (err) { reject(err); } }); },};export default { state, mutations, actions,};⽅案⼆：后端返回此⽤户的权限级别代码如下src/ // 省略其他代码，详细代码见github：/HYzihong/Each((to, from, next) => { && setTitle(); let token = "..."; if (token) { if (!Rules) { // store // .dispatch("authorization") // .then((rules) => { const rules = ["about"]; // 这⾥传⼊是⽤户的权限级别 store .dispatch("concatRoutes", rules) .then((routers) => { (ify(routers)); tes(routers); next({ ...to, replace: true }); }) .catch(() => { next({ name: "login" }); }); // }) // .catch(() => { // token = ''; // next({ name: "login" }); // }); } else { next(); } } else { if ( === "login") next(); else next({ name: "login" }); }});src/store/ // 省略其他代码，详细代码见github：/HYzihong/vue2-router-permissionsconst isRoleTrue = (role, rules) => { // 判断这个路由中的meta中的role的中是否包含此权限， return ((_role) => f(_role) > -1).length > 0;};const getAccesRouterList = (basicsRoutes, rules) => { return ((item) => { if (isRoleTrue(, rules)) { // 如果有⼦路由，就进⾏递归操作 if (en) en = getAccesRouterList(en, rules); return true; } else return false; });};const actions = { concatRoutes({ commit }, rules) { return new Promise((resolve, reject) => { try { let routerList = []; // 如果是admin权限，则直接进⾏返回所有路由 if (f("admin") > -1) { routerList = asyncRoutes; } else { // 递归asyncRoutes，看是否有权限访问 routerList = getAccesRouterList(asyncRoutes, rules); } commit("CONCAT_ROUTES", routerList); resolve(s); } catch (err) { reject(err); } }); },};⽅案三：后端返回此⽤户的可以访问的所有的路由表代码如下src/router/Each((to, from, next) => { && setTitle(); let token = "..."; if (token) { if (!Rules) { // store // .dispatch("authorization") // .then((rules) => { store .dispatch("concatRoutes") .then((routers) => { (routers); tes(routers); next({ ...to, replace: true }); }) .catch(() => { next({ name: "login" }); }); // }) // .catch(() => { // token = ''; // next({ name: "login" }); // }); } else { next(); } } else { if ( === "login") next(); else next({ name: "login" }); }});src/store/module/routerimport ajaxRouter from "../../utils/ajaxRouter";import routerMap from "../../utils/routerMap";// ⽅案⼀：简单的view结构使⽤const returnView = (url) => { return () => import(`../../views/${url}.vue`);};const initRoute = (router) => { ent = returnView(ent); if (en) getAccesRouterList(en); return router;};// ⽅案⼆：复杂的view结构使⽤const initRoute = (router) => { ent = routerMap[ent]; if (en) getAccesRouterList(en); return router;};const getAccesRouterList = (ajaxRouter) => { return ((item) => initRoute(item));};const actions = { concatRoutes({ commit }) { return new Promise((resolve, reject) => { try { let routerList = []; routerList = getAccesRouterList(ajaxRouter); commit("CONCAT_ROUTES", routerList); (routerList); resolve(s); } catch (err) { reject(err); } }); },};src/utils/ajaxRouter// 模拟后端返回的路由表const ajaxRouter = [ { path: "/form", name: "Form", component: "Form", }, { path: "/about", name: "About", component: "About", children: [ { path: "aboutChild", name: "AboutChild", component: "AboutChild", }, ], }, { path: "/list", name: "List", component: "List", },];export default ajaxRouter;src/utils/// 对应的view⽂件import Form from "../views/";import About from "../views/";import AboutChild from "../views/";import List from "../views/";const routerMap = { Form: Form, About: About, List: List, AboutChild: AboutChild,};export default routerMap;