Vue路由权限

Posted 2021-07-26 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
};