当前位置：首页 > VUE

vue实现token

2026-03-27 12:38:02VUE

Vue 中实现 Token 认证的步骤

安装依赖
在项目中安装 axios 和 vue-router（如未安装）：

npm install axios vue-router

配置 Axios 拦截器
在 src 目录下创建 utils/http.js，设置请求和响应拦截器，自动携带 Token 并处理 401 错误：

vue实现token

import axios from 'axios';

const http = axios.create({
  baseURL: 'https://your-api.com',
});

http.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

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

export default http;

登录逻辑
在登录组件中调用接口并存储 Token：

vue实现token

import http from '../utils/http';

export default {
  methods: {
    async login() {
      try {
        const res = await http.post('/login', { username, password });
        localStorage.setItem('token', res.data.token);
        this.$router.push('/dashboard');
      } catch (error) {
        alert('登录失败');
      }
    }
  }
}

路由守卫
在 src/router/index.js 中配置全局前置守卫，保护需要认证的路由：

import VueRouter from 'vue-router';

const routes = [
  { path: '/login', component: Login },
  { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
];

const router = new VueRouter({ routes });

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

Token 刷新（可选）
若需实现 Token 过期自动刷新，可在响应拦截器中添加逻辑：

http.interceptors.response.use(
  response => response,
  async error => {
    const originalRequest = error.config;
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      const res = await http.post('/refresh-token', { 
        refreshToken: localStorage.getItem('refreshToken') 
      });
      localStorage.setItem('token', res.data.token);
      return http(originalRequest);
    }
    return Promise.reject(error);
  }
);