当前位置：首页 > VUE

vue多角色登录实现

2026-02-24 23:28:42VUE

Vue 多角色登录实现方案

角色权限控制核心逻辑
通过后端返回的用户角色标识（如 role: 'admin'），结合前端路由守卫和动态路由实现权限隔离。需配合 Vuex 或 Pinia 管理全局状态。

后端接口设计要点

登录接口返回角色信息和权限列表

示例响应数据格式：

{
"token": "xxx",
"role": "admin",
"permissions": ["user:add", "user:delete"]
}

前端实现步骤

路由配置分层
创建基础路由（如登录页）和动态路由模块：

// router/index.js
const staticRoutes = [
  { path: '/login', component: Login }
]
const asyncRoutes = {
  admin: [...adminRoutes],
  user: [...userRoutes]
}

路由守卫处理
在全局前置守卫中验证角色并加载对应路由：

router.beforeEach(async (to, from, next) => {
  const hasToken = getToken()
  if (hasToken) {
    if (to.path === '/login') {
      next('/dashboard')
    } else {
      const hasRoles = store.getters.roles.length > 0
      if (hasRoles) {
        next()
      } else {
        const { roles } = await store.dispatch('user/getInfo')
        const accessRoutes = await generateRoutes(roles)
        router.addRoutes(accessRoutes)
        next({ ...to, replace: true })
      }
    }
  }
})

权限指令实现
自定义 v-permission 指令控制界面元素显隐：

// directives/permission.js
export default {
  inserted(el, binding, vnode) {
    const { value } = binding
    const permissions = store.getters.permissions
    if (!permissions.includes(value)) {
      el.parentNode.removeChild(el)
    }
  }
}

状态管理方案
使用 Vuex 存储角色和权限信息：

// store/modules/user.js
const actions = {
  login({ commit }, userInfo) {
    return new Promise((resolve, reject) => {
      login(userInfo).then(res => {
        commit('SET_ROLES', res.roles)
        commit('SET_PERMISSIONS', res.permissions)
        resolve()
      })
    })
  }
}

动态菜单渲染
根据权限过滤导航菜单：

// utils/permission.js
export function filterAsyncRoutes(routes, roles) {
  return routes.filter(route => {
    if (hasPermission(roles, route)) {
      if (route.children) {
        route.children = filterAsyncRoutes(route.children, roles)
      }
      return true
    }
    return false
  })
}

关键注意事项