当前位置：首页 > VUE

vue.js实现token

2026-01-22 14:26:05VUE

Vue.js 实现 Token 认证

在 Vue.js 中实现 Token 认证通常涉及以下几个关键步骤：

存储 Token

使用 localStorage 或 sessionStorage 存储 Token，确保在页面刷新后仍能保持登录状态。

// 存储 Token
localStorage.setItem('auth_token', 'your_jwt_token_here');

// 获取 Token
const token = localStorage.getItem('auth_token');

// 删除 Token
localStorage.removeItem('auth_token');

发送 Token 到后端

在每次请求中，通过 axios 拦截器将 Token 添加到请求头。

vue.js实现token

import axios from 'axios';

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

处理 Token 过期

在后端返回 401 状态码时，跳转到登录页面或刷新 Token。

axios.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === 401) {
    localStorage.removeItem('auth_token');
    router.push('/login');
  }
  return Promise.reject(error);
});

路由守卫

使用 Vue Router 的导航守卫保护需要认证的路由。

vue.js实现token

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

登录和登出

在登录成功后存储 Token，登出时清除 Token。

methods: {
  login() {
    axios.post('/api/login', this.credentials)
      .then(response => {
        localStorage.setItem('auth_token', response.data.token);
        this.$router.push('/dashboard');
      });
  },
  logout() {
    localStorage.removeItem('auth_token');
    this.$router.push('/login');
  }
}

刷新 Token

在 Token 快过期时，使用 refresh token 获取新的 Token。

axios.post('/api/refresh', { refreshToken: 'your_refresh_token' })
  .then(response => {
    localStorage.setItem('auth_token', response.data.token);
  });

通过以上方法，可以在 Vue.js 应用中实现完整的 Token 认证流程。