vue项目中实现用户登录角色鉴权，不同的用户登录展示不同的菜单

实现用户登录角色鉴权可以分为以下几个步骤：

1. 创建路由配置文件
在路由配置文件中定义不同的路由，每个路由对应一种权限。例如，管理员可以访问所有的路由，而普通用户只能访问部分路由。

import Vue from 'vue'
import Router from 'vue-router'
import Admin from '@/views/Admin'
import User from '@/views/User'
import Login from '@/views/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/admin',
      name: 'Admin',
      component: Admin,
      meta: {
        requiresAuth: true,
        roles: ['admin']
      }
    },
    {
      path: '/user',
      name: 'User',
      component: User,
      meta: {
        requiresAuth: true,
        roles: ['admin', 'user']
      }
    },
    {
      path: '/',
      name: 'Login',
      component: Login
    }
  ]
})

2. 创建登录页
在登录页中，用户输入用户名和密码后，将其发送至后端进行验证。验证通过后，后端返回一个包含用户信息和token的响应结果。前端可以将token存储在localStorage或sessionStorage中，以便在后续的请求中携带token。

3. 创建路由守卫
路由守卫可以用来检测用户是否有权限访问某个路由。在路由守卫中，可以检查localStorage或sessionStorage中是否存在token。如果不存在，则跳转到登录页；如果存在，则从token中解析出用户信息，并检查用户是否有权限访问该路由。如果有权限，则继续访问该路由；如果没有权限，则跳转到没有权限的提示页面。

import router from './router'

// 路由守卫
router.beforeEach((to, from, next) => {
  // 判断该路由是否需要登录权限
  if (to.meta.requiresAuth) {
    // 从localStorage中获取token
    const token = window.localStorage.getItem('token')
    if (token) {
      // 解析token，获取用户信息
      const payload = JSON.parse(atob(token.split('.')[1]))
      // 检查用户是否有权限访问该路由
      if (to.meta.roles.includes(payload.role)) {
        next()
      } else {
        next('/unauthorized')
      }
    } else {
      next('/login')
    }
  } else {
    next()
  }
})

4. 根据用户角色展示不同的菜单
在应用的导航栏或侧边栏中，根据用户角色动态地展示不同的菜单。可以通过computed属性计算出当前用户有权限访问的菜单，并将其渲染到视图中。

<template>
  <div>
    <ul>
      <li v-if="showAdminMenu"><router-link to="/admin">管理页面</router-link></li>
      <li v-if="showUserMenu"><router-link to="/user">用户页面</router-link></li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    showAdminMenu() {
      const token = window.localStorage.getItem('token')
      if (token) {
        const payload = JSON.parse(atob(token.split('.')[1]))
        return payload.role === 'admin'
      } else {
        return false
      }
    },
    showUserMenu() {
      const token = window.localStorage.getItem('token')
      if (token) {
        const payload = JSON.parse(atob(token.split('.')[1]))
        return ['admin', 'user'].includes(payload.role)
      } else {
        return false
      }
    }
  }
}
</script>