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(); // 关闭进度条
});

View Code

在 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;
    },
  },
};

 

 

 

原文地址：http://www.cnblogs.com/zhulongxu/p/16867124.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性