前端路由权限控制哪种方法合适?

唐_璜Taro
  • 45

对于前端控制权限,使得不同用户登录系统看到不同页面,有几点想不明白的地方

方法一:把全部的路由地址全部维护在一张路由表里面,在meta中定义哪些用户可以访问当前路由,不符合当前角色的,拦截到403页面

方法二:动态路由方法,定义好所有用户都可以访问的路由白名单,像['login','register']等静态路由,根据登录信息返回的角色信息,在异步路由中遍历出来符合当前角色信息的路由,然后通过 addRouters 方法进行添加。

以上两种方法都可以实现前端路由控制权限,到底有什么区别,各自利弊是什么?想不明白

回复
阅读 2.7k
8 个回答

第一种只适合定死了几种角色的显示权限, 项目较小。

正规的项目一般都采用第二种,更加灵活,权限控制也更加全面。
第二种一般前端只储存每个页面对应的文件,例如:

Order: () => import('/@/views/order/index.vue')

整个router除了基础的登陆等页面,其他全部以后端返回的为准, 这样可以在后台去设置菜单名称、图标以及排序, 可以灵活控制多角色不同菜单的显示。 在实际应用里面除了页面显示权限, 还会涉及到操作权限(添加、修改、删除)等等,还有数据权限,也可以后端进行灵活控制。

第一种的权限有前端直接控制。
第二种可以把路由写在后端,通过后端来控制路由更加灵活。

一般都是第一种
用第二种的除非页面是那种可配置化的通用页,不然没有意义,因为页面和路由关系是定死的

一种静态写死,一种动态配置。看你需求了

给你第三个方案吧,算是两个的集合
我一般情况不会使用动态路由,因为在开发过程中,没有权限的时候,想访问页面将很痛苦
权限的拦截点在路由的守卫函数里
同时,路由会使用meta,设置这个路由对应的页面的key,在登录的时候,请求后端,获取所有具备权限的页面key,做比对就好了

夏哥
  • 2
新手上路,请多包涵

结论:
第一种 比 第二种 代码量 和 代码阅读理解要好些。

看了全部评论,难道我才是异类???

权限 ➜ 角色 ➜ 帐号

登录的时候,接口返回的是当前账号分配到的 角色 的权限数据。

所以什么第一种静态前端绑定、第二种后端返回数据。完全不明白。。。
不都是登录拿到权限,存在本地。如果不想被轻易修改,使用插件存储在本地。
至于验证权限,前端验证一遍,后端访问接口再验证一边。

第一种:
a.入口权限验证判断(a 标签之类)
b.路由守卫权限验证判断
c.页面懒加载。
vue router
component:()=>import('../../views/xxx.vue') // 懒加载

第二种:
a.入口权限验证判断(a 标签之类)
b.路由表 动态导入页面。(可能会遇到 build 后路径错误的问题)
c.路由守卫 没有路由提示。

第一种直接放弃,只适合玩具、小项目。

第二种方案就合理许多,可以适用于大一些的项目。

这样说你满意了吗?但是我说一个不幸的事:我用过多种方案。我们应该在对的场景使用对的方案。不管是方案二还是方案一都依赖服务端

说说我做过的一个项目,前端全量路由表,beforeEach 做权限判断,服务端下发导航。服务端那边是权限给角色,用户加角色,都是多对多。

我在meta不是规定哪些角色,而是规定哪些权限。
规定角色的话,如果某个角色权限进行了调整,你前端也要调整。
动态路由才是最好的不过如果从零实现的话看项目吧,如果简单的项目没有必要。
如果已经有现成的当然动态路由喽。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏