vue3 权限管理 不同的账号角色 显示不同路由

在 Vue3 中实现权限管理，可以使用路由守卫来限制用户访问某些路由。对于不同的账号角色，可以在登录后将其角色信息保存在 Vuex 状态管理器中，然后在路由守卫中根据角色信息来判断用户是否有权限访问该路由。

以下是基本的实现步骤：

1. 在 Vuex 状态管理器中定义一个用来保存当前登录用户角色信息的状态。

// store.js
import { createStore } from 'vuex'

const store = createStore({
  state: {
    userRole: '' // 当前用户角色
  },
  mutations: {
    setUserRole (state, role) {
      state.userRole = role
    }
  },
  actions: {
    login ({ commit }, { username, password }) {
      // 登录逻辑，获取用户角色信息
      const role = 'admin'
      commit('setUserRole', role)
    }
  }
})

export default store

2. 在需要进行权限控制的路由上设置 meta 属性，用来记录该路由需要的权限信息。

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import Admin from './views/Admin.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/admin',
    name: 'Admin',
    component: Admin,
    meta: {
      requiresAuth: true, // 需要登录才能访问
      roles: ['admin'] // 只有管理员角色才能访问
    }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

3. 在路由守卫中根据用户角色信息和路由的 meta 信息来判断用户是否有权限访问该路由。

// router.js
import router from './router'
import store from './store'

router.beforeEach((to, from, next) => {
  const userRole = store.state.userRole
  const requiresAuth = to.meta.requiresAuth
  const roles = to.meta.roles

  if (requiresAuth && !userRole) {
    // 如果需要登录且用户未登录，则跳转到登录页
    next('/login')
  } else if (requiresAuth && roles.indexOf(userRole) === -1) {
    // 如果需要特定角色才能访问，且用户角色不在指定角色列表中，则跳转到首页
    next('/')
  } else {
    // 其他情况允许访问
    next()
  }
})

这样就可以根据用户角色信息和路由 meta 信息来限制用户访问某些路由了。当用户登录成功后，可以通过 Vuex 的 `setUserRole` 方法来更新用户角色信息，从而控制路由访问权限。