当前位置：首页 > VUE

vue实现token

2026-03-07 03:11:33VUE

Vue 中实现 Token 认证

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

安装必要的依赖

如果需要与后端 API 交互，可以安装 axios：

npm install axios

登录获取 Token

在登录页面中，发送用户凭证到后端 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('token', token); // 存储 Token
    axios.defaults.headers.common['Authorization'] = `Bearer ${token}`; // 设置请求头
    return token;
  } catch (error) {
    console.error('登录失败:', error);
    throw error;
  }
};

存储 Token

将 Token 存储在本地存储或 Vuex 中，以便后续请求使用：

// 使用 localStorage 存储
localStorage.setItem('token', token);

// 使用 Vuex 存储（需配置 Vuex）
store.commit('setToken', token);

发送 Token 的请求拦截

在每次请求中自动附加 Token：

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

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

import router from './router';

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

注销清除 Token

在注销功能中清除 Token 并重置请求头：

const logout = () => {
  localStorage.removeItem('token');
  delete axios.defaults.headers.common['Authorization'];
  router.push('/login');
};

刷新 Token 逻辑（可选）

如果 Token 有过期时间，可以实现刷新 Token 的逻辑：

vue实现token

axios.interceptors.response.use(response => {
  return response;
}, async error => {
  if (error.response.status === 401 && !error.config._retry) {
    error.config._retry = true;
    const refreshToken = localStorage.getItem('refreshToken');
    const response = await axios.post('/api/refresh', { refreshToken });
    localStorage.setItem('token', response.data.token);
    error.config.headers.Authorization = `Bearer ${response.data.token}`;
    return axios(error.config);
  }
  return Promise.reject(error);
});