20180308_vue-router前端权限控制问题

最新推荐文章于 2025-08-23 22:59:54 发布

weixin_34232617

最新推荐文章于 2025-08-23 22:59:54 发布

阅读量101

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript ViewUI

原文链接：https://segmentfault.com/a/1190000013622017

本文探讨了Vue-router在前端实现权限控制的方法。针对不同用户角色，通过登录时获取权限信息并存储，利用路由元信息判断访问权限，确保用户只能访问授权范围内的页面。

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

vue-router前端权限控制问题
前提纲要：
1.用户A和用户B有不同的权限。
页面分左侧菜单部分和右侧内容部分，右侧内容可能有不同路径的不同内容
最简单例子为点击左侧用户管理
右侧显示用户列表
点击某条内容详情
右侧显示某一用户的详细内容
2.用户A可以访问路径权限如下：

a/list
a/detail/:id
a/list/:id

用户B可以访问路径权限如下：

b/list
b/detail/:id
b/list/:id

3.正常用户登陆进去可以看到自己的菜单，
点击菜单右侧内容部分发生变化，然后在右侧操作,更改页面url，左侧菜单不变，右侧内容页发生变化

碰到问题如下：
用户B登陆进去点击菜单进入b/detail/:id然后保存为书签（即保存该路径）退出
然后用户A登陆点击保存的标签页，正常获取左侧菜单权限，左侧菜单正常显示，但是右侧却根据url显示了自己权限外的b/detail/:id的内容(暂不考虑跟服务端交互问题，虽说服务端可以再掉用接口时给出无权限返回，前端再根据返回进行逻辑处理，但即便这样前端页面显示依旧不正常)

解决方案：
在路由进入之前，根据路由的meta属性的某一字段比对所有的可访问权限(这个在登录时已经获取了，可以存在localstorage里)，如果能找到则进去否则跳转到某个固定页，这样就解决了权限问题