后台权限系统

第一种方法

第一种方法：

1. 首先在router中将路由分为三类 ： 常量路由 异步路由 任意路由（export出去）

//需要把路由进行拆分
//常量路由：就是不管用户是什么角色都可以看到的路由：登录、404、首页
export const constantRoutes = [{path: "/login",component: () => import("@/views/login/index"),hidden: true,meta: { title: "练手项目" },},{path: "/404",component: () => import("@/views/404"),hidden: true,},{path: "/",component: Layout,redirect: "/dashboard",children: [{path: "dashboard",name: "Dashboard",component: () => import("@/views/dashboard/index"),meta: { title: "首页", icon: "dashboard" },},],},
];
//异步路由：不同的用户（角色），需要过滤出能看到的权限
export const asyncRoutes = [//小功能{path: "/smallFeature",component: Layout,name: "smallFeature",meta: {title: "小功能",icon: "el-icon-s-grid",},children: [{path: "pswManage",name: "pswManage",component: () => import("@/views/smallFeature/pswManage"),meta: {title: "密码管理",},},{path: "snake",name: "snake",component: () => import("@/views/smallFeature/snake"),meta: {title: "贪吃蛇小游戏",},},],},//product{path: "/product",component: Layout,name: "product",meta: {title: "商品管理",icon: "el-icon-goods",},children: [{path: "trademark",name: "trademark",component: () => import("@/views/product/tradeMark"),meta: {title: "品牌管理",},},{path: "attr",name: "attr",component: () => import("@/views/product/Attr"),meta: {title: "平台属性管理",},},{path: "sku",name: "sku",component: () => import("@/views/product/Sku"),meta: {title: "Sku管理",},},{path: "category",name: "category",component: () => import("@/views/product/Category"),meta: {title: "分类管理",},},{path: "spu",name: "spu",component: () => import("@/views/product/Spu"),meta: {title: "Spu管理",},},],},
];
//任意路由:当路径出现错误 重定向
export const anyRoutes = { path: "*", redirect: "/404", hidden: true }

2. store>modules>user.js文件中修改getDefaultState函数

const getDefaultState = () => {return {//获取tokentoken: getToken(),//存储用户名name: "",//存储用户头像avatar: "",//存储用户权限roles: [],//存储routeroutes: [],//对比之后[项目中已有的异步路由，与服务器返回的标记信息进行对比最终需要展示的异步路由]resultAsyncRoutes: [],//最终要展示给用户的路由resultsAllRoutes:[]};
};

3. 修改getInfo函数将原本存储信息的两个commit合并为一个

 commit("SET_USERINFO", data);//mutations中添加一个方法//存储用户信息SET_USERINFO: (state, payload) => {//设置用户名state.name = payload.name;//设置用户头像state.avatar = payload.avatar;//菜单权限的标记state.routes = payload.routes;//角色state.roles = payload.roles;},

4. 由于后端给的数据不是直接显示routes需要的值 所以需要进行处理

   //后端传过来的数据
   {"code": 200,"message": "获取用户信息成功","data": {"id": 1,"roles": "admin","introduction": "I am a super administrator","avatar": "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif","name": "Super Admin","routes_id": 1,"routes": [{"id": 1,"route_parent_id": 1,"route_name": "小功能","path": "smallFeature","route_id": 1,"children": [{"id": 1,"route_parent_id": 1,"route_name": "密码管理","path": "pswManage","button_id": 1},{"id": 2,"route_parent_id": 1,"route_name": "贪吃蛇小游戏","path": "snake","button_id": 2}]},{"id": 2,"route_parent_id": 1,"route_name": "商品管理","path": "product","route_id": 2,"children": [{"id": 3,"route_parent_id": 2,"route_name": "品牌管理","path": "trademark","button_id": 3},{"id": 4,"route_parent_id": 2,"route_name": "平台属性管理","path": "attr","button_id": 4},{"id": 5,"route_parent_id": 2,"route_name": "Sku管理","path": "sku","button_id": 5},{"id": 6,"route_parent_id": 2,"route_name": "分类管理","path": "category","button_id": 6},{"id": 7,"route_parent_id": 2,"route_name": "Spu管理","path": "spu","button_id": 7}]}]}
   }
   

   而我们目前方法一只需要里面的path值所以还需要做个处理

   //getInfo函数中
   commit("SET_ROUTES", getRoutes(data.routes));
   //mutations中添加个方法//异步路由SET_ROUTES: (state, payload) => {state.routes = payload;},
   //在actions外面写个函数
   //根据adminInfo中返回的routes权限 返回出所有path值
   const getRoutes = function (payload) {var routes = payload;var len = routes.length;var routeList = [];//从routes中获取所有path值并添加到routeList中for (var i = 0; i < len; i++) {routeList.push(routes[i].path);if (routes[i].children) {var len2 = routes[i].children.length;for (var j = 0; j < len2; j++) {routeList.push(routes[i].children[j].path);}}}return routeList;
   };
   

   这时候存储的就是正确的数值了

5. 接下来将计算好的routes和异步路由进行比较

//1.引入刚刚router.index文件中暴露出来的异步路由和任意路由和常量路由
import { anyRoutes, resetRouter, asyncRoutes,constantRoutes } from "@/router";
//2.存储state 比对之后需要展示给用户的异步路由
//在getInfo中 添加一个操作
commit("SET_RESULTASYNCROUTES",computedAsyncRoutes(asyncRoutes, state.routes));
//3.在外面actions外面定义一个方法将异步路由和后端传过来的权限值进行比较
//异步路由和后端返回的路由进行对比 返回最终展示的路由
const computedAsyncRoutes = function (asyncRoutes, routes) {return asyncRoutes.filter((item) => {if (routes.indexOf(item.name) != -1) {//代表要展示//递归:别忘记还有2，3，4，5级路由if (item.children&&item.children.length) {item.children = computedAsyncRoutes(item.children, routes);}return true;}});
};//4.在mutations中添加一个方法//最终计算出来的异步路由
SET_RESULTASYNCROUTES: (state, payload) => {//这个是比对之后要展示的异步路由state.resultAsyncRoutes = payload;//将所有的路由进行合并 常量路由 异步路由 任意路由state.resultsAllRoutes=constantRoutes.concat(state.resultAsyncRoutes,anyRoutes)router.addRoutes(state.resultsAllRoutes)//这里是将计算好的路由添加进router},

5. 这时候路由已经设置好了并且也添加进去了 要去修改layout>components>sidebar>index.vue

​ 里面的computed里routes()方法让他根据我们user.state.resultsAllRoutes里的路由进行展示

  ...mapState("user",['resultsAllRoutes']),    
routes() {return this.resultsAllRoutes},