当前位置：首页 > VUE

vue实现用户鉴权

2026-01-12 06:42:20VUE

Vue 用户鉴权实现方案

前端路由守卫

在 Vue Router 中配置全局前置守卫，检查用户是否登录。未登录用户访问受限路由时重定向到登录页。

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

JWT 认证流程

前端在用户登录成功后存储 JWT token，后续请求通过 HTTP 头部携带。

vue实现用户鉴权

// 登录成功后
localStorage.setItem('token', response.data.token)
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`

// 请求拦截器
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

权限控制组件

创建高阶组件或指令控制界面元素显示，基于用户角色进行渲染判断。

Vue.directive('permission', {
  inserted(el, binding) {
    const userRoles = store.getters.roles
    if (!binding.value.some(role => userRoles.includes(role))) {
      el.parentNode.removeChild(el)
    }
  }
})

状态管理集成

使用 Vuex 集中管理认证状态，包括用户信息和登录状态。

vue实现用户鉴权

const store = new Vuex.Store({
  state: {
    user: null,
    isAuthenticated: false
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user
      state.isAuthenticated = !!user
    }
  }
})

安全注意事项

定期刷新 token 避免长期有效，敏感操作需二次验证。退出登录时清除客户端存储。

// 退出处理
localStorage.removeItem('token')
delete axios.defaults.headers.common['Authorization']
router.push('/login')

服务端配合

确保后端接口对每个请求进行权限校验，返回 401 状态码时前端应跳转登录页。

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