vue router权限管理实现不同角色显示不同路由

实现权限管理需要以下步骤：

1. 安装Vue Router

npm install vue-router --save

2. 配置路由

在router/index.js文件中，定义路由和对应的组件，并为每个路由定义一个meta字段，用于存放该路由需要的权限。

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
import Admin from '../views/Admin.vue'
import User from '../views/User.vue'

Vue.use(Router)

export const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: {
        requiresAuth: false // 不需要权限的路由
      }
    },
    {
      path: '/admin',
      name: 'Admin',
      component: Admin,
      meta: {
        requiresAuth: true, // 需要登录后才能访问的路由
        requiresRole: 'admin' // 需要管理员角色才能访问的路由
      }
    },
    {
      path: '/user',
      name: 'User',
      component: User,
      meta: {
        requiresAuth: true, // 需要登录后才能访问的路由
        requiresRole: 'user' // 需要用户角色才能访问的路由
      }
    }
  ]
})

3. 添加路由守卫

在router/index.js文件中，为每个需要权限控制的路由添加路由守卫，判断用户是否登录以及用户角色是否满足访问该路由的要求。如果不满足则跳转到登录页面或者提示无权限访问。同时，也要为不需要权限控制的路由添加路由守卫，防止已登录用户再次访问登录页面。

import { router } from './index'
import { getToken } from '../utils/auth'

const whiteList = ['/'] // 不需要权限的路由

router.beforeEach((to, from, next) => {
  const token = getToken()

  if (token) { // 已登录
    if (to.path === '/login') { // 防止已登录用户访问登录页面
      next({ path: '/' })
    } else {
      if (to.meta.requiresAuth) { // 需要权限控制
        const userRole = localStorage.getItem('userRole')
        if (to.meta.requiresRole === userRole) { // 用户角色满足要求
          next()
        } else { // 用户角色不符合要求
          next({ path: '/' }) // 提示无权限访问
        }
      } else { // 不需要权限控制
        next()
      }
    }
  } else { // 未登录
    if (whiteList.indexOf(to.path) !== -1) { // 不需要权限的路由，直接访问
      next()
    } else { // 需要权限的路由，跳转到登录页面
      next({ path: '/login' })
    }
  }
})

示例1：

比如，管理员角色需要访问后台管理页面，而普通用户不能访问。我们可以这样定义路由：

{
  path: '/admin',
  name: 'Admin',
  component: Admin,
  meta: {
    requiresAuth: true,
    requiresRole: 'admin'
  }
}

在路由守卫中，我们检查该路由是否需要权限控制，以及该用户的角色是否符合要求：

if (to.meta.requiresAuth) {
  const userRole = localStorage.getItem('userRole') // 从localStorage中获取用户角色
  if (to.meta.requiresRole === userRole) { // 用户角色满足要求
    next()
  } else { // 用户角色不符合要求
    next({ path: '/' })
  }
} else {
  next()
}

如果该路由需要权限控制，我们从localStorage中获取该用户的角色，并检查该角色是否等于路由要求的角色。如果不满足要求，则提示无权限访问。

示例2：

比如，未登录用户只能访问登录页面和注册页面，不能访问其他需要权限控制的页面。我们可以这样定义路由：

{
  path: '/login',
  name: 'login',
  component: Login,
  meta: {
    requiresAuth: false
  }
},
{
  path: '/register',
  name: 'register',
  component: Register,
  meta: {
    requiresAuth: false
  }
},
{
  path: '/profile',
  name: 'profile',
  component: Profile,
  meta: {
    requiresAuth: true
  }
}

在路由守卫中，我们为/login和/register添加白名单，防止未登录用户访问其他页面：

const whiteList = ['/login', '/register']

if (whiteList.indexOf(to.path) !== -1) { // 不需要权限的路由，直接访问
  next()
} else { // 需要权限的路由，跳转到登录页面
  next({ path: '/login' })
}

如果用户访问的是白名单中的路由，我们直接允许访问。如果访问的是其他路由，则跳转到登录页面。