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

Question

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

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

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

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

Answer 1

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

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

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

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

看了全部评论，难道我才是异类？？？

权限 ➜ 角色 ➜ 帐号

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

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

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

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

Answer 7

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

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

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

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

Answer 8

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