当前位置：首页 > VUE

vue带token实现登录

2026-02-24 08:52:52VUE

使用 Vue 实现 Token 登录

在 Vue 中实现 Token 登录通常涉及前端与后端的交互，包括发送登录请求、存储 Token、并在后续请求中携带 Token。以下是具体实现步骤：

发送登录请求并获取 Token

通过 axios 或其他 HTTP 客户端发送登录请求，将用户名和密码传递给后端 API。成功后，后端会返回一个 Token。

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('authToken', token); // 存储 Token
    return token;
  } catch (error) {
    console.error('登录失败:', error);
    throw error;
  }
};

存储 Token

将 Token 存储在 localStorage 或 sessionStorage 中，确保后续请求可以携带 Token。

localStorage.setItem('authToken', token); // 存储 Token

在请求头中携带 Token

通过 axios 的请求拦截器，在每次请求的头部自动添加 Token。

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

检查登录状态

通过检查 localStorage 中是否存在 Token 来判断用户是否已登录。

const isAuthenticated = () => {
  return !!localStorage.getItem('authToken');
};

登出功能

清除 localStorage 中的 Token 并跳转到登录页面。

const logout = () => {
  localStorage.removeItem('authToken');
  window.location.href = '/login'; // 跳转到登录页
};

路由守卫保护页面

使用 Vue Router 的导航守卫保护需要登录才能访问的页面。

import router from './router';

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

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

后端验证 Token

后端需要在每次请求时验证 Token 的有效性。如果 Token 无效，返回 401 状态码，前端可以跳转到登录页面。

axios.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === 401) {
    localStorage.removeItem('authToken');
    window.location.href = '/login';
  }
  return Promise.reject(error);
});

通过以上步骤，可以实现 Vue 中的 Token 登录功能，包括登录、存储 Token、携带 Token 请求、登出以及路由保护。

vue带token实现登录