当前位置：首页 > VUE

vue实现token

2026-01-12 20:07:06VUE

Vue 中实现 Token 验证的步骤

安装必要的依赖
使用 axios 进行 HTTP 请求，vue-router 处理路由守卫，js-cookie 管理 Cookie。通过 npm 安装：

npm install axios vue-router js-cookie

配置 Axios 拦截器
在请求头中自动添加 Token，并在响应拦截器中处理 Token 过期或无效的情况：

// src/utils/request.js
import axios from 'axios';
import Cookies from 'js-cookie';

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
});

service.interceptors.request.use(
  config => {
    const token = Cookies.get('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

service.interceptors.response.use(
  response => {
    return response.data;
  },
  error => {
    if (error.response.status === 401) {
      // Token 过期或无效，跳转到登录页
      router.push('/login');
    }
    return Promise.reject(error);
  }
);

export default service;

登录逻辑与 Token 存储
用户登录成功后，将 Token 存储到 Cookie 或 localStorage，并跳转到主页：

// src/views/Login.vue
import Cookies from 'js-cookie';
import request from '@/utils/request';

export default {
  methods: {
    handleLogin() {
      request.post('/login', this.form)
        .then(res => {
          Cookies.set('token', res.token, { expires: 7 }); // 7 天过期
          this.$router.push('/');
        });
    }
  }
};

路由守卫验证 Token
通过全局前置守卫检查用户是否已登录，未登录则重定向到登录页：

// src/router/index.js
import router from './router';
import Cookies from 'js-cookie';

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

注销功能
清除 Token 并跳转到登录页：

// src/components/Logout.vue
import Cookies from 'js-cookie';

export default {
  methods: {
    handleLogout() {
      Cookies.remove('token');
      this.$router.push('/login');
    }
  }
};