vue实现鉴权
Vue 实现鉴权的方法
在 Vue 项目中实现鉴权通常涉及前端路由守卫、状态管理（如 Vuex 或 Pinia）以及与后端 API 的交互。以下是几种常见的实现方式：
路由守卫实现鉴权
通过 Vue Router 的导航守卫（beforeEach）可以实现路由级别的鉴权。在路由跳转前检查用户权限，未登录或权限不足时重定向到登录页。
// 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 过期或无效的情况。
// 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)
}
}
}注意事项
- 前端鉴权仅为用户体验优化，真正的鉴权应由后端完成。
- 敏感操作需后端再次验证权限。
- token 应设置合理的过期时间，并实现刷新机制。
- 避免在客户端存储敏感信息。
通过以上方法，可以构建一个完整的 Vue 鉴权系统，确保用户只能访问其权限范围内的资源。
