vue实现认证授权
Vue 实现认证授权的方法
使用 JWT 进行认证
安装依赖包 jsonwebtoken 和 axios 用于处理 token 和 HTTP 请求。
npm install jsonwebtoken axios创建登录方法，发送用户凭证到后端并存储返回的 token。
methods: {
async login() {
try {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
});
localStorage.setItem('token', response.data.token);
this.$router.push('/dashboard');
} catch (error) {
console.error(error);
}
}
}路由守卫保护页面
在路由配置中使用 beforeEach 钩子检查用户是否已认证。
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token');
if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
next('/login');
} else {
next();
}
});全局 HTTP 拦截器
设置 axios 拦截器在每次请求时自动添加 token。
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, error => {
return Promise.reject(error);
});状态管理集成
使用 Vuex 集中管理认证状态。
const store = new Vuex.Store({
state: {
user: null,
isAuthenticated: false
},
mutations: {
setUser(state, user) {
state.user = user;
state.isAuthenticated = true;
},
logout(state) {
state.user = null;
state.isAuthenticated = false;
}
}
});注销功能实现
清除本地存储和状态管理中的认证信息。
methods: {
logout() {
localStorage.removeItem('token');
this.$store.commit('logout');
this.$router.push('/login');
}
}权限控制指令
创建自定义指令控制元素显示权限。
Vue.directive('permission', {
inserted(el, binding, vnode) {
const permissions = vnode.context.$store.state.user.permissions;
if (!permissions.includes(binding.value)) {
el.parentNode.removeChild(el);
}
}
});第三方认证集成
使用 Firebase 或 Auth0 等第三方服务简化认证流程。
// Firebase 示例
import firebase from 'firebase/app';
import 'firebase/auth';
firebase.auth().signInWithEmailAndPassword(email, password)
.then(userCredential => {
localStorage.setItem('token', userCredential.user.getIdToken());
});服务端渲染支持
对于 Nuxt.js 项目，使用插件和中间件处理认证。
// plugins/auth.js
export default function({ store, redirect }) {
if (!store.state.auth.loggedIn) {
return redirect('/login');
}
}
