后台管理系统-角色权限控制的实现

ps：服务器返回用户的权限标识 ；

 

 

 

 

 

 

主要在登录的时候判断用户的权限　　

　　1. 左侧菜单显示 

　　2. 路由的页面跳转 - 使用 addRoutes 增加动态路由规则并注入路由实例 router ；实现位置：在前置路由守卫中，和登录判断一块的 ；

 

 permission 文件实现 前置路由守卫

　　是否登录（token的有无）

　　　　登录了  - 是否去的是登录页

　　　　　　　　去的登录页 -  next("/");  强制跳转系统主页 ；

　　　　　　　　不是登录页 - 是否有用户资料 

　　　　　　　　　　　　　　没有资料  发起请求获取用户资料   addRoutes 动态添加路由规则 ；由于addRoutes 之后需要耗时，所以 next(to.path); 重新走一下这个路由页面 ；

　　　　　　　　　　　　　　有资料 直接放行 去任何页面，除了登录页面 ；

　　　　未登录  定义 白名单页面 在白名单里面允许跳转 否则拦截到登录页面 ；

permission.js 的代码：

import router from "./router";
import { getToken } from "./utils/auth";
import NProgress from "nprogress"; // 引入一份进度条插件
import "nprogress/nprogress.css"; // 引入进度条样式
import store from "./store";

// 全局前置守卫逻辑
router.beforeEach(async (to, from, next) => {
  NProgress.start(); // 开启进度条
  const token = getToken();
  const whiteList = ["/login", "/404"];
  if (token) {
    // 有token
    if (to.path === "/login") {
      // 去系统主页
      next("/");
    } else {
      // 放行  【登录了，有权限去访问系统内界面】
      if (!store.getters.userId) {
        // ps:store.getters.userId 刷新丢失
        // 发请求获取用户资料
        // console.log("发请求获取用户资料");
        const { roles } = await store.dispatch("user/getUserProfileAction");
        // 得到了页面权限标识
        // console.log(roles.menus);
        const userAsyncRoutes = await store.dispatch(
          "permission/filterRoutes",
          roles.menus
        );
        // console.log({ userAsyncRoutes });
        // 把动态路由注入到路由实例router中
        router.addRoutes(userAsyncRoutes);
        next(to.path);
      }
      next();
    }
  } else {
    // 没有token
    if (whiteList.includes(to.path)) {
      // 放行
      next();
    } else {
      // 拦截
      next("/login");
    }
  }
  NProgress.done();
});

// 全局后置守卫
router.afterEach(function () {
  NProgress.done(); // 关闭进度条
});

在 main.js 引入 导航守卫文件 permission.js 

 

 

新建你一个 文件 专门处理权限控制  path:  store/modules/permmission.js ;

文件代码：

import { constantRoutes, asyncRoutes } from "@/router";

// 新建你一个 文件 专门处理权限控制
export default {
  namespaced: true,
  state() {
    return {
      routes: constantRoutes,
    };
  },
  mutations: {
    setRoutes(state, data) {
      state.routes = [...constantRoutes, ...data];
    },
  },
  actions: {
    // 用来整理出属于当前用户的动态路由映射数组
    filterRoutes(context, data) {
      // data 是当前的路由标识
      // asyncRoutes 完整的动态路由规则
      const userAsyncRoutes = asyncRoutes.filter((item) => {
        return data.includes(item.name);
      });
      // console.log(userAsyncRoutes);
      context.commit("setRoutes", userAsyncRoutes);
      // 返回的是某个用户的权限路由页面
      return userAsyncRoutes;
    },
  },
};