当前位置：首页 > VUE

vue实现安全免登录

2026-01-07 03:55:43VUE

Vue 实现安全免登录的方案

免登录功能通常通过持久化认证状态（如 Token）实现，但需兼顾安全性。以下是基于 Vue 的常见实现方案：

基于 Token 的免登录

登录成功后存储 Token
后端返回的认证 Token（如 JWT）需存储在客户端的 localStorage 或 sessionStorage 中：
```
// 登录成功回调
localStorage.setItem('auth_token', response.data.token);
```

路由拦截验证 Token
使用 Vue Router 的全局前置守卫检查 Token 有效性：

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

Token 自动续期
通过 Axios 拦截器在请求头注入 Token，并处理过期自动刷新：

axios.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer ${localStorage.getItem('auth_token')}`;
  return config;
});

安全增强措施

HttpOnly Cookie 存储
避免直接前端存储 Token，改为后端设置 HttpOnly Cookie（需配合跨域配置）：
```
// 后端示例（Node.js）
res.cookie('token', generateToken(), { httpOnly: true, secure: true });
```
短期 Token 与刷新机制
采用短期有效的 Access Token（如 1 小时）和长期 Refresh Token（如 7 天），通过定时检查或接口返回 401 时自动刷新。
敏感操作二次验证
对于关键操作（如支付），强制要求重新输入密码或短信验证。

代码示例：Token 自动刷新

// axios 响应拦截器
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      return refreshToken().then(() => {
        return axios(error.config); // 重试原请求
      });
    }
    return Promise.reject(error);
  }
);

function refreshToken() {
  return axios.post('/refresh', { refreshToken: getRefreshToken() })
    .then(res => {
      localStorage.setItem('auth_token', res.data.accessToken);
    });
}