vue 实现token 登录

实现 Token 登录的基本流程

在 Vue 中实现 Token 登录通常涉及以下几个关键步骤：用户登录验证、Token 存储、请求拦截和权限控制。以下是具体实现方法。

用户登录与 Token 获取

通过登录接口发送用户名和密码，后端验证成功后返回 Token（通常为 JWT）。使用 axios 或其他 HTTP 库发送请求：

import axios from 'axios';

const login = async (username, password) => {
  try {
    const response = await axios.post('/api/login', { username, password });
    const token = response.data.token;
    localStorage.setItem('token', token); // 存储 Token
    axios.defaults.headers.common['Authorization'] = `Bearer ${token}`; // 设置请求头
    return true;
  } catch (error) {
    console.error('登录失败:', error);
    return false;
  }
};

Token 存储与请求拦截

将 Token 存储在 localStorage 或 sessionStorage 中，并通过 axios 拦截器自动附加到后续请求的头部：

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

路由守卫与权限控制

使用 Vue Router 的全局前置守卫 (beforeEach) 检查 Token，限制未登录用户访问受保护路由：

import router from './router';

router.beforeEach((to, from, next) => {
  const isProtectedRoute = to.matched.some(record => record.meta.requiresAuth);
  const token = localStorage.getItem('token');

  if (isProtectedRoute && !token) {
    next('/login'); // 跳转到登录页
  } else {
    next(); // 放行
  }
});

Token 过期与刷新

如果 Token 有过期时间，可以通过拦截响应检查 401 错误，并尝试刷新 Token：

axios.interceptors.response.use(response => response, async error => {
  if (error.response.status === 401) {
    const refreshToken = localStorage.getItem('refreshToken');
    if (refreshToken) {
      try {
        const res = await axios.post('/api/refresh', { refreshToken });
        localStorage.setItem('token', res.data.token);
        error.config.headers.Authorization = `Bearer ${res.data.token}`;
        return axios(error.config); // 重试原请求
      } catch (e) {
        localStorage.removeItem('token');
        router.push('/login');
      }
    }
  }
  return Promise.reject(error);
});

退出登录处理

清除本地存储的 Token 并重置 axios 的请求头：

const logout = () => {
  localStorage.removeItem('token');
  delete axios.defaults.headers.common['Authorization'];
  router.push('/login');
};

通过以上方法，可以完整实现 Vue 中的 Token 登录机制，包括登录验证、权限控制和 Token 管理。