Vue路由权限

Posted 2022-12-06 web-gmy

一、路由权限

1、服务端返回权限列表

 rules: 
      // 路有权限，页面权限
      page: 
        home: true,
        home_index: true,
        count_to: true,
        upload: false,
        form: true,
        store: true
      ,
      component: 
        //   组件权限
        edit_button: true,
        dele_button: false
      
    

2、拆分路由（把公共路由和权限路由分开，根据路由构建组件）

// 动态路由
export const routerMap = [
  
    path: "/home",
    name: "home",
    component: Home,
    meta:  title: "首页" ,
    children: [
      
        path: "/home_index",
        name: "home_index",
        component: () => import("../views/homeIndex.vue"),
        meta:  title: "首页第一页" 
      
    ]
  ,
  
    path: "/count-to",
    name: "count_to",
    component: () => import("../views/countTo.vue"),
    meta:  title: "数量" 
  ,
  
    path: "/upload",
    name: "upload",
    component: () => import("../views/upload.vue"),
    meta:  title: "下载" 
  ,
  
    path: "/form",
    name: "form",
    component: () => import("../views/form.vue"),
    meta:  title: "表单" 
  ,
  
    path: "/store",
    name: "store",
    component: () => import("../views/store.vue"),
    meta:  title: "商店" 
  
];
// 默认大家都能访问的路由
export const routes = [
  
    path: "/",
    name: "login",
    component: () => import("../views/login.vue")
  ,
  
    path: "*",
    component: () => import("../views/404.vue")
  
];

const router = new VueRouter(
  routes
);

3、判断是否获取权限，如果没有获取就发送请求获取在vuex中设置是否获取过权限的标识

export default new Vuex.Store(
  state: 
    // 初始化设置用户没有获取过权限
    hasPermisson: false
  ,
  mutations: 
    setPermisson(state) 
      console.log("已经获取过权限");
      state.hasPermisson = true;
    
  ,
  actions: ,
  modules:  router 
);

4、在路由的钩子函数中，判断是否获取过权限，如果没有就获取

// 路由钩子
if (process.env.NODE_ENV === "development") require("./mock");
router.beforeEach(async (to, from, next) => 
  // 如果没有获取过权限，则获取路由权限
  if (!store.state.hasPermisson) 
    // 发送请求获取权限
    let newRouter = await store.dispatch("router/getAuthRouter");
    // vueApi动态添加路由的方法
    router.addRoutes(newRouter);
    // 保证路由加载完毕
    next( ...to, replace: true );
   else 
    next();
  
);

5、在vuex中获取权限列表，并过滤出需要的路由

// 管理路由
import  getAuth  from "../../api";
// 引入动态路由列表
import  routerMap  from "../../router/index";
// 过滤，返回有权限的路由列表
function getAccesRouterList(routes, page) 
  return routes.filter(route => 
    if (page[route.name]) 
      // 如果有子路由，递归判断子路由是否有权限
      if (route.children) 
        route.children = getAccesRouterList(route.children, page);
      
      return true;
     else 
      return false;
    
  );

const state = 
  menuList: [],
  // 组件权限
  btnPermission: 
    edit_button: true,
    dele_button: true
  
  // edit_button: true,
  // dele_button: true
;
const actions = 
  async getAuthRouter( commit ) 
    let needRouter;
    try 
      // 获取后台返回的权限列表
      const authList = await getAuth();
      let 
        rules: 
          page,
          component:  edit_button, dele_button 
        
       = authList;
      // 设置按钮权限
      commit("setComp",  edit_button, dele_button );
      //   根据权限列表来过滤我们需要的路由列表
      needRouter = getAccesRouterList(routerMap, page);
      // 把权限路由列表放在state
      commit("setMenulist", needRouter);
      // 已经获取权限，修改权限状态,提交到全局
      commit("setPermisson", null,  root: true );
     catch (e) 
      console.log(e);
    
    return needRouter;
  
;
const mutations = 
  setMenulist(state, routes) 
    state.menuList = routes;
  ,
  setComp(state,  edit_button, dele_button ) 
    console.log("按钮权限");
    state.btnPermission.edit_button = edit_button;
    state.btnPermission.dele_button = dele_button;
  
;
export default 
  namespaced: true,
  state,
  actions,
  mutations
;