Vue3项目权限管理

登录页面

在登录页面添加如下逻辑,即用账号密码请求后端获取token并保存,然后跳转至首页。

    submitForm(loginForm) {
      this.$refs[loginForm].validate((valid) => {
        if (valid) {
          let userinfo = this.loginForm;
          login(userinfo).then((res) => {
            let userList = res.user;
            setToken("Token", userList.token);
            this.$router.push({ path: "/" });
            this.$store.dispatch("initLeftMenu"); //设置左边菜单始终为展开状态
          });
        }
      });
    },

权限控制

import router from "./router";
import store from "./store";
import { getToken } from "./utils/auth"; // 验权(从cookie中获取)
import { getUserInfo } from "./api/user";
import { ElMessage } from "element-plus";
function hasPermission(roles, permissionRoles) {
  if (roles.indexOf("admin") >= 0) return true;
  if (!permissionRoles) return true;
  return roles.some((role) => permissionRoles.indexOf(role) >= 0);
}

const whiteList = ["/login"]; //不重定向白名单

router.beforeEach((to, from, next) => {
  const browserHeaderTitle = to.meta.title;
  store.commit("SET_BROWSERHEADERTITLE", {
    browserHeaderTitle: browserHeaderTitle,
  });
  // 点击登录时,拿到了token并存入了cookie,保证页面刷新时,始终可以拿到token
  if (getToken("Token")) {
    if (to.path == "/login") {
      next({ path: "/" });
    } else {
      // 用户登录成功之后,每次点击路由都进行了角色的判断;
      if (store.getters.roles.length == 0) {
        let token = getToken("Token");
        getUserInfo({ token: token })
          .then()
          .then((res) => {
            let userList = res.userList;
            store.commit("SET_ROLES", userList.roles);
            store.commit("SET_NAME", userList.name);
            store
              .dispatch("GenerateRoutes", { roles: userList.roles })
              .then(() => {
                // 根据roles权限生成可访问的路由表
                const routers = store.getters.addRouters;
                routers.forEach((route) => {
                  router.addRoute(route);
                });
                next({ ...to, replace: true }); // hack方法 确保addRoutes已完成
              });
          })
          .catch((err) => {
            store.dispatch("LogOut").then(() => {
              ElMessage.error(err || "Verification failed, please login again");
              next({ path: "/" });
            });
          });
      } else {
        // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
        if (hasPermission(store.getters.roles, to.meta.roles)) {
          next();
        } else {
          next({ path: "/401", replace: true, query: { noGoBack: true } });
        }
      }
    }
  } else {
    if (whiteList.indexOf(to.path) != -1) {
      //点击退出时,会定位到这里
      next();
    } else {
      next("/login");
    }
  }
});

router.afterEach(() => {
  setTimeout(() => {
    const browserHeaderTitle = store.getters.browserHeaderTitle;
    window.document.title = browserHeaderTitle;
  }, 0);
});

根据role进行路由过滤

import { asyncRouterMap, constantRouterMap } from "@/router";

/**
 * 通过meta.role判断是否与当前用户权限匹配
 * @param roles
 * @param route
 */
function hasPermission(roles, route) {
  // roles为权限身份数组
  if (route.meta && route.meta.roles) {
    return roles.some((role) => route.meta.roles.indexOf(role) >= 0);
  } else {
    return true;
  }
}

/**
 * 递归过滤异步路由表,返回符合用户角色权限的路由表
 * @param asyncRouterMap
 * @param roles
 */
function filterAsyncRouter(asyncRouterMap, roles) {
  // 返回满足条件的子路由对象
  const accessedRouters = asyncRouterMap.filter((route) => {
    if (hasPermission(roles, route)) {
      if (route.children && route.children.length) {
        // route.children重新过滤赋值;
        route.children = filterAsyncRouter(route.children, roles);
      }
      return true; // 返回该权限路由对象;
    }
    return false;
  });
  return accessedRouters;
}

const permission = {
  state: {
    routers: constantRouterMap,
    addRouters:[],
  },
  getters: {
    permission_routers: (state) => state.routers, // 所有路由
    addRouters: state => state.addRouters, //权限过滤路由
  },
  mutations: {
    SET_ROUTERS: (state, routers) => {
      state.addRouters = routers,
      state.routers = constantRouterMap.concat(routers); // 总路由
    },
  },
  actions: {
    // 根据角色,重新设置权限路由;并保存到vuex中,SET_ROUTERS;
    GenerateRoutes({ commit }, data) {
      return new Promise((resolve) => {
        let roles = data.roles;
        let accessedRouters = "";
        if (roles.indexOf("admin") >= 0) {
          // 如果是管理员,直接将权限路由赋值给新路由;
          accessedRouters = asyncRouterMap;
        } else {
          // 非管理员用户,如roles:['editor','developer'],则需要过滤权限路由数据
          accessedRouters = filterAsyncRouter(asyncRouterMap, roles);
        }
        commit("SET_ROUTERS", accessedRouters);
        resolve();
      });
    },
  },
};

export default permission;

登出页面

    LogOut({ commit, reqData }) {
      // eslint-disable-next-line no-unused-vars
      return new Promise((resolve, reject) => {
        logout(reqData).then((response) => {
          console.log(response);
          commit("SET_ROLES", []);
          commit("SET_NAME", []);
          removeToken("Token");
          resolve();
        });
      });
    },
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,324评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,356评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,328评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,147评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,160评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,115评论 1 296
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,025评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,867评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,307评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,528评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,688评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,409评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,001评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,657评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,811评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,685评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,573评论 2 353

推荐阅读更多精彩内容