当前位置：首页 > VUE

vue实现用户鉴权

2026-02-09 19:43:36VUE

Vue 实现用户鉴权的方法

基于路由守卫的鉴权

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

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

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

使用 Vuex 管理鉴权状态

在 Vuex store 中集中管理用户登录状态和 token：

const store = new Vuex.Store({
  state: {
    token: null,
    user: null
  },
  mutations: {
    setAuth(state, { token, user }) {
      state.token = token
      state.user = user
      localStorage.setItem('token', token)
    },
    clearAuth(state) {
      state.token = null
      state.user = null
      localStorage.removeItem('token')
    }
  },
  getters: {
    isAuthenticated: state => !!state.token
  }
})

封装 HTTP 拦截器

在 axios 拦截器中自动添加 token：

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

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      store.commit('clearAuth')
      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>

JWT 鉴权流程

用户登录成功后，后端返回 JWT token
前端存储 token 至 Vuex 和 localStorage
每次请求在 header 中携带 token
后端验证 token 有效性
token 过期或无效时跳转登录页

权限验证高阶组件

创建高阶组件包装需要权限的组件：

const withAuth = (WrappedComponent) => {
  return {
    render(createElement) {
      return store.getters.isAuthenticated
        ? createElement(WrappedComponent)
        : createElement('div', '请先登录')
    }
  }
}

// 使用方式
export default withAuth(AdminComponent)

动态路由加载

根据用户权限动态生成可访问路由：

vue实现用户鉴权

function generateRoutes(permissions) {
  const allRoutes = [...]
  return allRoutes.filter(route => 
    !route.meta?.permission || 
    permissions.includes(route.meta.permission)
  )
}

// 登录后调用
const allowedRoutes = generateRoutes(user.permissions)
router.addRoutes(allowedRoutes)

这些方法可以单独使用或组合实现完整的鉴权系统，根据项目复杂度选择合适方案。关键点包括 token 管理、路由控制、请求拦截和细粒度权限检查。