![a6b4cea4e13c65896cfb9c239208b06a.png](https://i-blog.csdnimg.cn/blog_migrate/0e6438231fe61ddc8423f20aa5880c70.jpeg)
转载:https://cloud.tencent.com/developer/article/1449210
① 使用全局路由守卫
实现
前端定义好路由,并且在路由上标记相应的权限信息
const routerMap = [
{
path: '/permission',
component: Layout,
redirect: '/permission/index',
alwaysShow: true,
meta: {
title: 'permission',
icon: 'lock',
roles: ['admin', 'editor']
},
children: [{
path: 'page',
component: () => import('@/views/permission/page'),
name: 'pagePermission',
meta: {
title: 'pagePermission',
roles: ['admin']
}
}, {
path: 'directive',
component: () => import('@/views/permission/directive'),
name: 'directivePermission',
meta: {
title: 'directivePermission'
}
}]
}]
全局路由守卫每次都判断用户是否已经登录,没有登录则跳到登录页。
已经登录 (已经取得后台返回的用户的权限信息(角色之类的)),则判断当前要跳转的路由,用户是否有权限访问 (根据路由名称到全部路由里找到对应的路由,判断用户是否具备路由上标注的权限信息 (比如上面的roles : [ 'admin', 'editor' ]))。
没有权限则跳到事先定义好的界面 ( 403、404 之类的)。
这种方式,菜单可以直接用路由生成 (用户没有权限的菜单也会显示,点击跳转的时候才做权限判断),也可以在用户登录后根据用户权限把
路由过滤一遍生成菜单 (菜单需要保存在 vuex 里)。
目前 iview-admin 还是用的这种方式
- 加载所有的路由,如果路由很多,而用户并不是所有的路由都有权限访问,对性能会有影响。
- 全局路由守卫里,每次路由跳转都要做权限判断。
- 菜单信息写死在前端,要改个显示文字或权限信息,需要重新编译。
- 菜单跟路由耦合在一起,定义路由的时候还有添加菜单显示标题,图标之类的信息,而且路由不一定作为菜单显示,还要多加字段进行标识。
② 登录页与主应用分离
针对前一种实现方式的缺点,可以将登录页与主应用放到不同的页面 (不在同一个 Vue 应用实例里)。
实现
登录成功后,进行页面跳转 (真正的页面跳转,不是路由跳转),并将用户权限传递到主应用所在页面,主应用初始化之前,根据用户权限筛
选路由,筛选后的路由作为 vue 的实例化参数,而不是像前一种方式所有的路由都传递进去,也不需要在全局路由守卫里做权限判断了。
缺点
- 需要做页面跳转,不是纯粹的单页应用。
- 菜单信息写死在前端,要改个显示文字或权限信息,需要重新编译。
- 菜单跟路由耦合在一起,定义路由的时候还有添加菜单显示标题,图标之类的信息,而且路由不一定作为菜单显示,还要多加字段进行标识。
③ 使用 addRoutes 动态挂载路由
addRoutes 允许在应用初始化之后,动态的挂载路由。有了这个新姿势,就不用像前一种方式那样要在应用初始化之要对路由进行筛选。
实现
应用初始化的时候先挂载不需要权限控制的路由,比如登录页,404 等错误页。
有个问题,addRoutes 应该何时调用,在哪里调用
登录后,获取用户的权限信息,然后筛选有权限访问的路由,再调用 addRoutes 添加路由。
这个方法是可行的。但是不可能每次进入应用都需要登录,用户刷新浏览器又要登陆一次。
所