vue实现token
Vue 中实现 Token 认证的方法
在 Vue 中实现 Token 认证通常涉及前端与后端的交互，包括 Token 的获取、存储、发送和刷新等操作。以下是具体实现步骤：
获取 Token
用户登录时，向后端发送用户名和密码，后端验证成功后返回 Token。可以使用 Axios 发送 POST 请求：
axios.post('/api/login', {
username: 'user',
password: 'password'
})
.then(response => {
const token = response.data.token;
localStorage.setItem('token', token); // 存储 Token
})
.catch(error => {
console.error('登录失败:', error);
});存储 Token
Token 通常存储在本地存储（localStorage）或 Vuex 中。localStorage 适合持久化存储，而 Vuex 适合全局状态管理。
// 存储到 localStorage
localStorage.setItem('token', token);
// 存储到 Vuex
store.commit('setToken', token);发送 Token
在后续请求中，需要在请求头中携带 Token。可以通过 Axios 的请求拦截器自动添加：
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, error => {
return Promise.reject(error);
});验证 Token
每次路由跳转时，检查 Token 是否存在或有效。可以通过 Vue Router 的全局前置守卫实现：
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token');
if (to.meta.requiresAuth && !token) {
next('/login');
} else {
next();
}
});刷新 Token
Token 过期时，可以通过刷新 Token 接口获取新的 Token。在响应拦截器中处理：
axios.interceptors.response.use(response => {
return response;
}, error => {
if (error.response.status === 401) {
return axios.post('/api/refresh-token', {
refreshToken: localStorage.getItem('refreshToken')
})
.then(response => {
localStorage.setItem('token', response.data.token);
error.config.headers.Authorization = `Bearer ${response.data.token}`;
return axios(error.config);
});
}
return Promise.reject(error);
});清除 Token
用户退出登录时，清除本地存储的 Token：
localStorage.removeItem('token');
store.commit('clearToken');
router.push('/login');通过以上步骤，可以在 Vue 中实现完整的 Token 认证流程。
