vue实现jwt登录
Vue 实现 JWT 登录
安装依赖
确保项目中已安装 axios 和 vue-router。若未安装，可通过以下命令安装：
npm install axios vue-router配置 Axios 实例
在 src 目录下创建 utils/axios.js 文件，配置全局 Axios 实例并设置请求拦截器：
import axios from 'axios';
const instance = axios.create({
baseURL: 'http://your-api-base-url.com',
});
instance.interceptors.request.use((config) => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
export default instance;登录逻辑实现
在登录组件中调用 API 并处理 JWT 返回：
import axios from '../utils/axios';
export default {
data() {
return {
username: '',
password: '',
};
},
methods: {
async login() {
try {
const response = await axios.post('/auth/login', {
username: this.username,
password: this.password,
});
localStorage.setItem('token', response.data.token);
this.$router.push('/dashboard');
} catch (error) {
console.error('登录失败:', error);
}
},
},
};路由守卫配置
在 src/router/index.js 中配置全局前置守卫，验证 JWT：
import Vue from 'vue';
import Router from 'vue-router';
import axios from '../utils/axios';
Vue.use(Router);
const router = new Router({
routes: [
{ path: '/login', component: () => import('@/views/Login.vue') },
{ path: '/dashboard', component: () => import('@/views/Dashboard.vue'), meta: { requiresAuth: true } },
],
});
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
const token = localStorage.getItem('token');
if (!token) {
next('/login');
} else {
axios.get('/auth/validate').then(() => {
next();
}).catch(() => {
localStorage.removeItem('token');
next('/login');
});
}
} else {
next();
}
});
export default router;注销功能
在需要注销的组件中添加清除 JWT 的逻辑：
methods: {
logout() {
localStorage.removeItem('token');
this.$router.push('/login');
},
}后端 API 要求
确保后端 API 满足以下规范：
- 登录接口
/auth/login返回{ token: 'jwt-token-string' } - 验证接口
/auth/validate返回 HTTP 200 状态码（验证通过）或 401（验证失败）
安全注意事项
- 使用 HTTPS 协议传输敏感数据
- 避免在客户端存储敏感信息
- 设置合理的 JWT 过期时间
- 考虑实现刷新令牌机制
