vue权限路由实现方式:-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44600358/article/details/123009381

本文探讨了前端权限管理的两种常见方案。第一种是完全由前端拦截，通过预定义的用户角色权限映射来控制路由访问。这种方法简单但存在性能问题，如加载所有路由和菜单写死。第二种方案是用户权限路由存在数据库中，后端返回，前端动态挂载。这种方式避免了不必要的路由加载，但需要处理后端返回的数据并动态添加路由。两种方法各有优劣，适用于不同的项目需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种：完全由前端拦截

1.定义几种用户权限：

属性名：用户名；

let ku={
  'xtadmin':['/菜单路由地址1','/菜单路由地址2'],
  'aqadmin':['/菜单路由地址1','/菜单路由地址2'],
  'sjadmin':['/菜单路由地址1','/菜单路由地址2']
}

2.登陆成功后判断是哪个用户登陆的，让其跳转到其对于的权限的首页

全局守卫：

router.beforeEach((to, from, next) => {
  //监听跳转的路由地址是否为该用户权限范围内的，若不是则跳回其权限首页

}

3.封装axios请求拦截器去拦截不是该用户权限的请求

// 请求拦截器
service.interceptors.request.use(config => {
 //判断 config.url和config.method去拦截请求
return
}, error => {
  console.log(error)
  Promise.reject(error)
})

缺点

加载所有的路由，如果路由很多，而用户并不是所有的路由都有权限访问，对性能会有影响。
全局路由守卫里，每次路由跳转都要做权限判断。
菜单信息写死在前端，想修改权限都要修改前端代码
菜单跟路由耦合在一起，定义路由的时候还有添加菜单显示标题，图标之类的信息，而且路由不一定作为菜单显示，还要多加字段进行标识

第二种：用户的权限路由地址存在数据库中，登陆时由后端返回

这种方式工作中常用

菜单与路由完全由后端返回

1.前端统一定义路由组件

const Home = () => import("../pages/Home.vue");
const UserInfo = () => import("../pages/UserInfo.vue");
export default {
  home: Home,
  userInfo: UserInfo
};

后端返回的格式：（后端返回该用户所对应的路由信息，如下）

const permissionRouter=[
{name: "home",path: "/",component: "home"},
{name: "UserInfo ",path: "/userinfo",component: "userInfo"}
]

2.在将后端返回路由通过addRoutes动态挂载之前，需要将数据处理一下，将component字段换为真正的组件。

后端返回的地址是字符串，把它转化为真正的组件

const formatRoutesByComponentPath = function (routes) {
    routes.forEach(route => {
      route.component = () => import(`../${route.componentPath}.vue`)
      //判断是否套着子路由
      if (route.children) {
        formatRoutesByComponentPath(route.children)
      }
    })
  }
  //调用
formatRoutesByComponentPath(permissionRouter);
//添加有权限的路由组件
router.addRoutes(permissionRouter);

此方法不要每个页面都去添加路由守卫狗去判断有无权限，手动修改无权限地址直接报404！