当前位置：首页 > VUE

vue实现登录保存token

2026-01-20 00:56:23VUE

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');

vue实现登录保存token