vue实现认证授权
Vue 实现认证授权的常见方法
使用 Vue Router 的导航守卫
通过 beforeEach 钩子检查用户是否登录。未登录时重定向到登录页：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token');
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});路由配置中标记需要认证的页面：
{
path: '/dashboard',
meta: { requiresAuth: true }
}JWT 认证集成
登录成功后存储返回的 Token：
axios.post('/login', credentials)
.then(response => {
localStorage.setItem('token', response.data.token);
router.push('/dashboard');
});请求拦截器中添加 Token：
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) config.headers.Authorization = `Bearer ${token}`;
return config;
});状态管理（Vuex/Pinia）
使用集中式状态管理存储用户信息：
// Pinia 示例
export const useAuthStore = defineStore('auth', {
state: () => ({
user: null,
isAuthenticated: false
}),
actions: {
login(userData) {
this.user = userData;
this.isAuthenticated = true;
}
}
});权限控制组件
创建自定义指令或组件控制元素显示：
// 指令方式
Vue.directive('permission', {
inserted(el, binding) {
const hasPermission = checkPermission(binding.value);
if (!hasPermission) el.parentNode.removeChild(el);
}
});模板中使用：
<button v-permission="'admin'">管理按钮</button>第三方库集成
- vue-auth-plugin：提供角色/权限管理
- vue-oidc-client：支持 OAuth2/OIDC
- Firebase Auth：快速集成社交登录
最佳实践建议
- 敏感路由采用服务端二次验证
- Token 设置合理过期时间并实现刷新机制
- 使用 HTTPS 保护认证数据传输
- 重要操作需进行重新认证（如支付前验证密码）
服务端配合要点
- REST API 返回 401/403 状态码
- 实现 CSRF 防护（如 SameSite Cookie）
- 用户角色数据应最小化传输
以上方案可根据项目复杂度组合使用，中小型项目通常采用 JWT + 路由守卫即可满足需求。
