vue权限路由实现的方法示例总结

使用全局路由守卫

实现

前端定义好路由，并且在路由上标记相应的权限信息

const routerMap = [
 {
 path: '/permission',
 component: Layout,
 redirect: '/permission/index',
 alwaysShow: true, // will always show the root menu
 meta: {
 title: 'permission',
 icon: 'lock',
 roles: ['admin', 'editor'] // you can set roles in root nav
 },
 children: [{
 path: 'page',
 component: () => import('@/views/permission/page'),
 name: 'pagePermission',
 meta: {
 title: 'pagePermission',
 roles: ['admin'] // or you can only set roles in sub nav
 }
 }, {
 path: 'directive',
 component: () => import('@/views/permission/directive'),
 name: 'directivePermission',
 meta: {
 title: 'directivePermission'
 // if do not set roles, means: this page does not require permission
 }
 }]
 }]

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提升思维能力
群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。

全局路由守卫每次都判断用户是否已经登录，没有登录则跳到登录页。已经登录(已经取得后台返回的用户的权限信息(角色之类的))，则判断当前要跳转的路由，用户是否有权限访问(根据路由名称到全部路由里找到对应的路由，判断用户是否具备路由上标注的权限信息(比如上面的roles: [‘admin’, ‘editor’]))。没有权限则跳到事先定义好的界面(403,404之类的)。

这种方式，菜单可以直接用路由生成(用户没有权限的菜单也会显示，点击跳转的时候才做权限判断)，也可以在用户登录后根据用户权限把路由过滤一遍生成菜单(菜单需要保存在vuex里)。

目前iview-admin还是用的这种方式

缺点

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

登录页与主应用分离

针对前一种实现方式的缺点，可以将登录页与主应用放到不同的页面(不在同一个vue应用实例里)。

实现

登录成功后，进行页面跳转(真正的页面跳转，不是路由跳转)，并将用户权限传递到主应用所在页面，主应用初始化之前，根据用户权限筛选路由，筛选后的路由作为vue的实例化参数，而不是像前一种方式所有的路由都传递进去，也不需要在全局路由守卫里做权限判断了。
缺点

• 需要做页面跳转，不是纯粹的单页应用
• 菜单信息写死在前端，要改个显示文字或权限信息，需要重新编译
• 菜单跟路由耦合在一起，定义路由的时候还有添加菜单显示标题，图标之类的信息，而且路由不一定作为菜单显示，还要多加字段进行标识

使用addRoutes动态挂载路由

addRoutes允许在应用初始化之后，动态的挂载路由。有了这个新姿势，就不用像前一种方式那样要在应用初始化之要对路由进行筛选。

实现

应用初始化的时候先挂载不需要权限控制的路由，比如登录页，404等错误页。

有个问题，addRoutes应该何时调用，在哪里调用

登录后，获取用户的权限信息，然后筛选有权限访问的路由，再调用addRoutes添加路由。这个方法是可行的。但是不可能每次进入应用都需要登录，用户刷新浏览器又要登陆一次。

所以addRoutes还是要在全局路由守卫里进行调用

import router from './router'
import store from './store'
import { Messa