当前位置：首页 > VUE

vue实现免登录

2026-01-18 05:25:02VUE

实现免登录的常见方法

使用本地存储保存用户凭证 将用户登录后的token或session信息存储在localStorage或sessionStorage中，下次访问时自动读取并验证。适合需要短期免登录的场景。

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

// 应用初始化时检查
const token = localStorage.getItem('auth_token');
if (token) {
  // 自动登录逻辑
}

设置长期有效的Cookie 通过后端设置HttpOnly的长期有效Cookie，前端每次请求会自动携带。比localStorage更安全，适合需要长期免登录的场景。

// 后端示例(Node.js)
res.cookie('auth_token', token, { 
  maxAge: 30 * 24 * 60 * 60 * 1000,
  httpOnly: true 
});

使用路由守卫控制访问 在Vue路由中设置全局前置守卫，检查本地是否存在有效凭证，实现自动跳转或拦截。

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

实现JWT自动续期 当token即将过期时，使用refresh token自动获取新token，延长用户免登录时间。需要后端配合实现双token机制。

// 拦截器处理token刷新
axios.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === 401) {
    return refreshToken().then(res => {
      localStorage.setItem('auth_token', res.data.token);
      error.config.headers['Authorization'] = 'Bearer ' + res.data.token;
      return axios(error.config);
    });
  }
  return Promise.reject(error);
});

安全注意事项

vue实现免登录