当前位置：首页 > VUE

vue如何实现token登录

2026-01-22 08:05:37VUE

Vue 中实现 Token 登录的步骤

用户登录与 Token 获取

用户通过表单提交登录信息（如用户名和密码），发送请求到后端 API。后端验证成功后返回 Token（通常为 JWT）。

// 示例：登录请求
axios.post('/api/login', {
  username: 'user',
  password: 'password'
}).then(response => {
  const token = response.data.token;
  localStorage.setItem('auth_token', token); // 存储 Token
  axios.defaults.headers.common['Authorization'] = `Bearer ${token}`; // 设置请求头
});

Token 存储与请求头设置

将 Token 存储在本地（如 localStorage 或 Vuex），并在每次请求时通过 axios 拦截器自动添加到请求头。

vue如何实现token登录

// 设置 axios 请求拦截器
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('auth_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

路由守卫验证登录状态

通过 Vue Router 的全局前置守卫（beforeEach）检查用户是否已登录。未登录用户跳转到登录页。

vue如何实现token登录

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

Token 过期与刷新

如果 Token 过期，可以通过刷新 Token 机制（如使用 Refresh Token）重新获取有效 Token，或在过期时强制用户重新登录。

// 响应拦截器处理 Token 过期
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      localStorage.removeItem('auth_token');
      router.push('/login');
    }
    return Promise.reject(error);
  }
);

退出登录处理

用户退出时清除本地存储的 Token 并重置全局状态。

// 退出登录逻辑
function logout() {
  localStorage.removeItem('auth_token');
  delete axios.defaults.headers.common['Authorization'];
  router.push('/login');
}

通过以上步骤，可以实现基于 Token 的登录认证机制，确保用户访问权限和安全性。