当前位置：首页 > VUE

vue实现鉴权

2026-02-18 08:32:18VUE

Vue 实现鉴权的方法

在 Vue 项目中实现鉴权通常涉及前端路由守卫、状态管理（如 Vuex 或 Pinia）以及与后端 API 的交互。以下是几种常见的实现方式：

路由守卫实现鉴权

通过 Vue Router 的导航守卫（beforeEach）可以实现路由级别的鉴权。在路由跳转前检查用户权限，未登录或权限不足时重定向到登录页。

vue实现鉴权

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import store from '@/store'

Vue.use(Router)

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

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

状态管理存储鉴权信息

使用 Vuex 或 Pinia 存储用户登录状态和权限信息。登录成功后，将 token 和用户信息存入 store。

// store/auth.js
export default {
  state: {
    token: null,
    user: null
  },
  mutations: {
    setToken(state, token) {
      state.token = token
    },
    setUser(state, user) {
      state.user = user
    }
  },
  getters: {
    isAuthenticated: state => !!state.token
  }
}

API 请求拦截

在发送 API 请求时，通过 Axios 拦截器自动添加 token 到请求头，并在响应拦截器中处理 token 过期或无效的情况。

vue实现鉴权

// utils/axios.js
import axios from 'axios'
import store from '@/store'

const instance = axios.create({
  baseURL: process.env.VUE_APP_API_URL
})

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

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

export default instance

动态路由与权限控制

根据用户权限动态生成路由表，实现更细粒度的权限控制。后端返回用户权限列表，前端根据权限动态注册路由。

// router/index.js
const dynamicRoutes = [
  {
    path: '/admin',
    component: Admin,
    meta: { requiresAuth: true, roles: ['admin'] }
  }
]

export function generateRoutes(userRoles) {
  return dynamicRoutes.filter(route => {
    return route.meta.roles.some(role => userRoles.includes(role))
  })
}

本地存储 token

登录成功后，将 token 存储到 localStorage 或 sessionStorage，并在页面刷新时重新初始化 store 中的状态。

// store/auth.js
actions: {
  login({ commit }, { token, user }) {
    commit('setToken', token)
    commit('setUser', user)
    localStorage.setItem('token', token)
  },
  initAuth({ commit }) {
    const token = localStorage.getItem('token')
    if (token) {
      commit('setToken', token)
    }
  }
}