当前位置：首页 > VUE

vue实现登录权限控制

2026-02-20 18:57:27VUE

实现登录权限控制的基本思路

Vue中实现登录权限控制通常涉及路由守卫、状态管理和接口拦截。核心逻辑是在用户未登录时拦截非法访问，跳转到登录页；登录后根据权限动态加载可访问的路由。

路由守卫配置

在router/index.js中配置全局前置守卫，通过meta字段标记需要权限的路由：

const router = new VueRouter({
  routes: [
    {
      path: '/dashboard',
      component: Dashboard,
      meta: { requiresAuth: true }
    }
  ]
})

router.beforeEach((to, from, next) => {
  const isAuthenticated = store.getters.isLoggedIn
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

状态管理实现

使用Vuex存储登录状态和用户权限信息：

// store/modules/auth.js
const state = {
  token: localStorage.getItem('token') || '',
  userInfo: null
}

const mutations = {
  SET_TOKEN(state, token) {
    state.token = token
    localStorage.setItem('token', token)
  },
  SET_USER_INFO(state, userInfo) {
    state.userInfo = userInfo
  }
}

const actions = {
  login({ commit }, credentials) {
    return axios.post('/api/login', credentials).then(res => {
      commit('SET_TOKEN', res.data.token)
      commit('SET_USER_INFO', res.data.user)
    })
  }
}

动态路由加载

根据用户权限动态添加路由：

// 定义基础路由和动态路由
const basicRoutes = [...]
const asyncRoutes = [...]

// 在登录成功后加载权限路由
function loadRoutes(roles) {
  const allowedRoutes = asyncRoutes.filter(route => {
    return !route.meta.roles || route.meta.roles.includes(roles)
  })
  router.addRoutes(allowedRoutes)
}

API请求拦截

在axios拦截器中添加token验证：

axios.interceptors.request.use(config => {
  const token = store.state.auth.token
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      store.commit('LOGOUT')
      router.push('/login')
    }
    return Promise.reject(error)
  }
)

按钮级权限控制

通过自定义指令实现按钮级别的权限控制：

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:delete'">删除</button>

登录状态持久化

通过localStorage或cookie实现登录状态持久化：

// 初始化时从本地存储恢复状态
if (localStorage.getItem('token')) {
  store.commit('SET_TOKEN', localStorage.getItem('token'))
  axios.get('/api/userinfo').then(res => {
    store.commit('SET_USER_INFO', res.data)
  })
}

退出登录处理

清除存储的状态和本地数据：

actions: {
  logout({ commit }) {
    commit('SET_TOKEN', '')
    commit('SET_USER_INFO', null)
    localStorage.removeItem('token')
    router.push('/login')
  }
}

以上方案实现了完整的登录权限控制流程，包括路由拦截、状态管理、动态路由加载和接口权限验证。实际项目中可根据具体需求调整权限粒度。

vue实现登录权限控制