当前位置：首页 > VUE

vue 实现token 登录

2026-03-07 21:47:43VUE

实现 Token 登录的流程

Token 登录是一种常见的身份验证方式，通常用于前后端分离的项目中。以下是基于 Vue 实现 Token 登录的详细方法。

登录接口调用

在 Vue 中，可以使用 Axios 或其他 HTTP 库发送登录请求。登录成功后，后端会返回一个 Token，需要将其存储到本地（如 localStorage 或 sessionStorage）。

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

存储 Token

登录成功后，将 Token 存储到本地，以便后续请求时使用。通常使用 localStorage 或 sessionStorage。

vue 实现token 登录

localStorage.setItem('token', token);

请求拦截器

在每次发送请求时，将 Token 添加到请求头中。可以通过 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);
});

响应拦截器

处理响应时，检查 Token 是否过期或无效。如果 Token 无效，可以跳转到登录页面。

vue 实现token 登录

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

路由守卫

在 Vue Router 中配置路由守卫，检查用户是否已登录。如果未登录，则跳转到登录页面。

import router from './router';

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

注销登录

注销时，清除本地存储的 Token 并跳转到登录页面。

const logout = () => {
  localStorage.removeItem('token');
  window.location.href = '/login';
};

完整示例

以下是一个完整的 Vue 组件示例，实现 Token 登录功能。

<template>
  <div>
    <form @submit.prevent="handleLogin">
      <input v-model="username" placeholder="用户名" />
      <input v-model="password" type="password" placeholder="密码" />
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    async handleLogin() {
      try {
        const response = await axios.post('/api/login', {
          username: this.username,
          password: this.password
        });
        const token = response.data.token;
        localStorage.setItem('token', token);
        this.$router.push('/dashboard');
      } catch (error) {
        console.error('登录失败:', error);
      }
    }
  }
};
</script>