vue 实现token 登录
安装依赖
确保项目中已安装 axios 和 vue-router。若未安装，可通过以下命令安装：
npm install axios vue-router配置axios拦截器
在 src 目录下创建 utils/http.js 文件，配置请求和响应拦截器，自动携带 token 并处理 token 过期：
import axios from 'axios';
const http = axios.create({
baseURL: 'https://your-api-domain.com/api',
});
// 请求拦截器：添加token
http.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
// 响应拦截器：处理token过期
http.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
localStorage.removeItem('token');
window.location.href = '/login';
}
return Promise.reject(error);
}
);
export default http;登录逻辑实现
在登录组件中调用接口获取 token 并存储：
import http from '@/utils/http';
export default {
data() {
return {
form: {
username: '',
password: '',
},
};
},
methods: {
async handleLogin() {
try {
const res = await http.post('/login', this.form);
localStorage.setItem('token', res.data.token);
this.$router.push('/dashboard');
} catch (error) {
alert('登录失败');
}
},
},
};路由守卫配置
在 src/router/index.js 中配置全局前置守卫，保护需要认证的路由：
import Vue from 'vue';
import Router from 'vue-router';
import Login from '@/views/Login.vue';
import Dashboard from '@/views/Dashboard.vue';
Vue.use(Router);
const router = new Router({
routes: [
{ path: '/login', component: Login },
{ path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } },
],
});
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token');
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});
export default router;登出功能实现
在需要登出的地方清除 token 并跳转至登录页：
methods: {
handleLogout() {
localStorage.removeItem('token');
this.$router.push('/login');
},
}注意事项
- Token 存储：使用
localStorage存储 token 需注意 XSS 风险，敏感项目可改用httpOnlycookies。 - HTTPS：确保生产环境使用 HTTPS 传输 token。
- 刷新 Token：若后端支持 token 刷新，可在拦截器中实现自动刷新逻辑。
