vue实现登录保存token
Vue 中实现登录保存 Token
使用 localStorage 保存 Token
登录成功后，将 Token 存储在 localStorage 中，便于页面刷新后仍能保持登录状态。
// 登录成功后保存 Token
localStorage.setItem('token', response.data.token);从 localStorage 中获取 Token 并验证用户是否登录。
// 获取 Token
const token = localStorage.getItem('token');
if (!token) {
// 未登录，跳转到登录页
router.push('/login');
}使用 Vuex 管理 Token
在 Vuex 中定义状态管理 Token，结合 localStorage 实现持久化存储。
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
token: localStorage.getItem('token') || ''
},
mutations: {
setToken(state, token) {
state.token = token;
localStorage.setItem('token', token);
},
clearToken(state) {
state.token = '';
localStorage.removeItem('token');
}
},
actions: {
login({ commit }, token) {
commit('setToken', token);
},
logout({ commit }) {
commit('clearToken');
}
}
});在组件中调用 Vuex 的 actions 进行登录和登出操作。
// 登录
this.$store.dispatch('login', response.data.token);
// 登出
this.$store.dispatch('logout');使用 Axios 拦截器自动携带 Token
通过 Axios 拦截器，在每次请求时自动将 Token 添加到请求头中。
// axios 配置
import axios from '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);
}
);路由守卫验证登录状态
使用 Vue Router 的全局前置守卫，验证用户是否已登录，未登录则跳转到登录页。
// router.js
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router = new Router({
routes: [
// 路由配置
]
});
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token');
if (to.meta.requiresAuth && !token) {
next('/login');
} else {
next();
}
});
export default router;处理 Token 过期
在 Axios 响应拦截器中检查 Token 是否过期，过期则跳转到登录页。
axios.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response.status === 401) {
// Token 过期或无效，跳转到登录页
router.push('/login');
}
return Promise.reject(error);
}
);使用 Cookie 保存 Token（可选）
如果需要更安全的存储方式，可以使用 js-cookie 库将 Token 存入 Cookie。
import Cookies from 'js-cookie';
// 保存 Token
Cookies.set('token', response.data.token, { expires: 7 }); // 7天后过期
// 获取 Token
const token = Cookies.get('token');
// 删除 Token
Cookies.remove('token');
