当前位置：首页 > VUE

vue实现权限登录

2026-01-18 08:39:23VUE

权限登录实现方案

在Vue中实现权限登录通常涉及前端路由控制、接口权限验证和动态菜单生成。以下是具体实现方法：

登录认证流程

用户提交登录表单后，向后端发送认证请求

axios.post('/api/login', {
  username: 'admin',
  password: '123456'
}).then(response => {
  const token = response.data.token
  localStorage.setItem('user-token', token)
  router.push('/dashboard')
})

后端返回的token需要存储在本地（localStorage或cookie），并在每次请求时携带

axios.interceptors.request.use(config => {
  config.headers['Authorization'] = localStorage.getItem('user-token')
  return config
})

路由权限控制

创建基础路由和动态路由文件

vue实现权限登录

// router.js
const constantRoutes = [
  { path: '/login', component: Login },
  { path: '/404', component: NotFound }
]

const asyncRoutes = [
  { path: '/admin', component: Admin, meta: { roles: ['admin'] }},
  { path: '/user', component: User, meta: { roles: ['user', 'admin'] }}
]

使用路由守卫进行权限验证

router.beforeEach((to, from, next) => {
  const hasToken = localStorage.getItem('user-token')
  if (to.path === '/login') {
    hasToken ? next('/') : next()
  } else {
    hasToken ? checkAccess(to, next) : next('/login')
  }
})

function checkAccess(to, next) {
  const userRoles = store.getters.roles
  if (to.meta.roles) {
    userRoles.some(role => to.meta.roles.includes(role)) 
      ? next() 
      : next('/403')
  } else {
    next()
  }
}

动态菜单生成

根据用户权限过滤可访问路由

function filterRoutes(routes, roles) {
  return routes.filter(route => {
    if (route.meta && route.meta.roles) {
      return roles.some(role => route.meta.roles.includes(role))
    }
    return true
  })
}

将过滤后的路由添加到路由器实例

vue实现权限登录

store.dispatch('user/getInfo').then(roles => {
  const accessedRoutes = filterRoutes(asyncRoutes, roles)
  router.addRoutes(accessedRoutes)
})

按钮级权限控制

创建自定义权限指令

Vue.directive('permission', {
  inserted(el, binding, vnode) {
    const { value } = binding
    const permissions = store.getters.permissions

    if (value && !permissions.includes(value)) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
})

在模板中使用指令控制按钮显示

<button v-permission="'user:add'">添加用户</button>

权限数据管理

使用Vuex存储权限相关信息

const store = new Vuex.Store({
  state: {
    token: '',
    roles: [],
    permissions: []
  },
  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles
    }
  }
})