Vue项目前后端分离下的前端鉴权方案

最新推荐文章于 2024-07-25 14:40:04 发布

春深是蔚蓝

最新推荐文章于 2024-07-25 14:40:04 发布

阅读量1.8k

点赞数 1

分类专栏： vue 文章标签：前端鉴权异步路由按钮权限前后端分离 vue

本文链接：https://blog.csdn.net/qq_15390381/article/details/103298533

版权

本文介绍了在Vue项目中，采用异步加载路由的方式实现前端鉴权，包括路由鉴权、按钮权限控制和token自动更新。针对不同需求，如防止地址栏入侵、动态加载路由、精确到按钮的权限管理等，提供了具体的实现方案。同时，文中还讨论了同一浏览器登录账号限制的处理方法，通过全局路由守卫和请求拦截器确保了鉴权的有效性。

摘要由CSDN通过智能技术生成

Vue项目前后端分离下的前端鉴权方案

技术栈

前端Vue全家桶，后台.net。

需求分析

前端路由鉴权，屏蔽地址栏入侵
路由数据由后台管理，前端只按固定规则异步加载路由
权限控制精确到每一个按钮
自动更新token
同一个浏览器只能登录一个账号

前端方案

对于需求1、2、3，采用异步加载路由方案

首先编写vue全局路由守卫
排除登录路由和无需鉴权路由
登录后请求拉取用户菜单数据
在vuex里处理菜单和路由匹配数据
将在vuex里处理好的路由数据通过addRoutes异步推入路由

  router.beforeEach((to, from, next) => {
    // 判断当前用户是否已拉取权限菜单
    if (store.state.sidebar.userRouter.length === 0) {
      // 无菜单时拉取
      getMenuRouter()
        .then(res => {
          let _menu = res.data.Data.ColumnDataList || [];
          // if (res.data.Data.ColumnDataList.length > 0) {
          // 整理菜单&路由数据
          store.commit("setMenuRouter", _menu);
          // 推入权限路由列表
          router.addRoutes(store.state.sidebar.userRouter);
          next({...to, replace: true });
          // }
        })
        .catch(err => {
          // console.log(err);
          // Message.error("服务器连接失败");
        });
    } else {
      //当有用户权限的时候，说明所有可访问路由已生成 如访问没权限的菜单会自动进入404页面
      if (to.path == "/login") {
        next(