使用 vue-router 之导航守卫 + meta 实现不同的用户角色具有不同的页面访问权限的功能

这篇博客的讲述基于使用 vue-router 之导航守卫 + localStorage 实现在未登录状态下跳转到登录页面的功能，大家可以先去看看上篇博客。

具体实现：

1.router.js文件

现在以 superadmin、admin、user 三种不同的用户角色为例，在定义路由时，加上该路由可以由哪种用户角色来访问，代码如下所示:

比如说，/HelloWorld 页面这三种用户角色均可访问，/SuperAdmin 页面只能由 superadmin 这一个角色访问。

    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld,
      meta: {requireAuth: true, roles: ['superadmin','admin','user']}
    },
    {
      path: '/SuperAdmin',
      name: 'SuperAdmin',
      component: SuperAdmin,
      meta: {requireAuth: true, roles: ['superadmin']}
    },
    {
      path: '/Admin',
      name: 'Admin',
      component: Admin,
      meta: {requireAuth: true, roles: ['admin']}
    },
    {
      path: '/User',
      name: 'User',
      component: User,
      meta: {requireAuth: true, roles: ['user']}
    },

2.main.js文件

router.beforeEach((to, from, next) => {
  console.log('上一个页面：', from)
  console.log('下一个页面：', to)
  let userToken = localStorage.getItem('userToken')
  let role = localStorage.getItem('role')
  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    console.log('main-token：', userToken)
    if (userToken) { // 判断本地是否存在token
      if (to.meta.roles.length !== 0) {
        for (let i = 0; i < to.meta.roles.length; i++) {
          if (role === to.meta.roles[i]) {
            next()
            break
          } else if (i === to.meta.roles.length - 1) {
            next({
              path: '/Error'
            })
          }
        }
      } else {
        next()
      }
    } else {
      next({
        path: '/Login'
      })
    }
  } else {
    next()
  }
  /* 如果本地存在token,则不允许直接跳转到登录页面 */
  if (to.fullPath === '/Login') {
    if (userToken) {
      next({
        path: from.fullPath
      })
    } else {
      next()
    }
  }
})

3.Login.vue

在登录页面中，登录请求成功之后，需要判断一下用户角色类型，根据不同的用户角色来跳转到不同的页面，代码如下所示：

      if (role === 'superadmin') {
        that.$router.push({
          name: 'SuperAdmin'
        })
      } else if (role === 'admin') {
        that.$router.push({
          name: 'Admin'
        })
      } else if (role === 'user') {
        that.$router.push({
          name: 'User'
        })
      }

END