当前位置：首页 > VUE

vue怎么实现登录持久

2026-01-21 02:32:14VUE

Vue 实现登录持久化的方法

使用 localStorage 或 sessionStorage 存储 token

通过 localStorage 或 sessionStorage 存储用户的登录凭证（如 token），在页面刷新后依然可以读取。localStorage 数据长期保存，sessionStorage 仅在当前会话有效。

// 登录成功后存储 token
localStorage.setItem('token', response.data.token);

// 在应用初始化时检查 token
const token = localStorage.getItem('token');
if (token) {
  // 设置请求头或恢复登录状态
  axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
}

结合 Vuex 管理登录状态

在 Vuex 中存储登录状态，同时配合 localStorage 实现持久化。通过 Vuex 的 persistedstate 插件可以自动同步状态到 localStorage。

vue怎么实现登录持久

import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';

const store = new Vuex.Store({
  state: {
    user: null,
    token: null
  },
  mutations: {
    setUser(state, payload) {
      state.user = payload.user;
      state.token = payload.token;
    }
  },
  plugins: [createPersistedState()]
});

使用 Cookie 存储 token

通过 js-cookie 库可以方便地操作 Cookie，适合需要后端验证的场景。

vue怎么实现登录持久

import Cookies from 'js-cookie';

// 登录成功后设置 Cookie
Cookies.set('token', response.data.token, { expires: 7 }); // 7天后过期

// 初始化时检查 Cookie
const token = Cookies.get('token');
if (token) {
  // 恢复登录状态
}

路由守卫检查登录状态

在 Vue Router 的全局前置守卫中检查登录状态，未登录则跳转到登录页。

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token') !== null;
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

后端配合实现 token 刷新

通过定期刷新 token 或检查 token 有效性，确保用户长时间保持登录状态。

// 示例：定时刷新 token
setInterval(() => {
  if (localStorage.getItem('token')) {
    axios.post('/refresh-token').then(response => {
      localStorage.setItem('token', response.data.token);
    });
  }
}, 30 * 60 * 1000); // 每30分钟刷新一次