当前位置：首页 > VUE

vue实现制动登录功能

2026-02-20 20:37:46VUE

实现 Vue 自动登录功能

自动登录功能通常通过结合本地存储（如 localStorage）和 Vue 的状态管理（如 Vuex 或 Pinia）来实现。以下是实现步骤：

使用 localStorage 存储 token

在用户登录成功后，将 token 存储到 localStorage 中，以便下次访问时自动验证。

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

检查 token 是否存在

在应用初始化时（如 App.vue 或路由守卫中），检查 localStorage 是否存在 token。如果存在，则自动登录。

// 在 Vue 应用的入口文件或路由守卫中
const token = localStorage.getItem('authToken');
if (token) {
  // 调用自动登录接口验证 token 有效性
  axios.get('/api/validate-token', {
    headers: { Authorization: `Bearer ${token}` }
  }).then(response => {
    // 验证成功，更新用户状态
    store.commit('setUser', response.data.user);
  }).catch(error => {
    // 验证失败，清除无效 token
    localStorage.removeItem('authToken');
  });
}

结合 Vuex/Pinia 管理登录状态

使用 Vuex 或 Pinia 存储用户登录状态，确保全局可用。

// Vuex 示例
const store = new Vuex.Store({
  state: {
    user: null,
    isAuthenticated: false
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
      state.isAuthenticated = true;
    },
    logout(state) {
      state.user = null;
      state.isAuthenticated = false;
      localStorage.removeItem('authToken');
    }
  }
});

路由守卫控制访问权限

通过 Vue Router 的路由守卫，限制未登录用户访问受保护的路由。

// 路由配置示例
router.beforeEach((to, from, next) => {
  const isAuthenticated = store.state.isAuthenticated;
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);

  if (requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

自动登录的优化

vue实现制动登录功能

设置 token 过期时间：在 token 中嵌入过期时间，避免长期无效存储。
刷新 token：在 token 快过期时，通过 refresh token 获取新 token。
安全存储：敏感数据建议使用 sessionStorage 或加密存储。

// 示例：检查 token 过期时间
const tokenExpiry = localStorage.getItem('tokenExpiry');
if (tokenExpiry && new Date().getTime() > parseInt(tokenExpiry)) {
  localStorage.removeItem('authToken');
}