当前位置：首页 > VUE

vue.js实现token

2026-02-23 05:22:19VUE

Vue.js 中实现 Token 认证的方法

使用 localStorage 或 sessionStorage 存储 Token

在用户登录成功后，将服务器返回的 Token 存储在客户端的 localStorage 或 sessionStorage 中。localStorage 适合长期存储，sessionStorage 在浏览器关闭后自动清除。

// 登录成功后存储 Token
localStorage.setItem('auth_token', response.data.token);

在每次发送请求时，从存储中获取 Token 并添加到请求头中。

// 在请求拦截器中添加 Token
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('auth_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

使用 Vuex 集中管理 Token 状态

在 Vuex 中定义 Token 的状态和操作，方便全局访问和管理。

// store.js
const store = new Vuex.Store({
  state: {
    token: null
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
      localStorage.setItem('auth_token', token);
    },
    clearToken(state) {
      state.token = null;
      localStorage.removeItem('auth_token');
    }
  },
  actions: {
    login({ commit }, token) {
      commit('setToken', token);
    },
    logout({ commit }) {
      commit('clearToken');
    }
  }
});

在组件中通过 Vuex 的 action 和 mutation 操作 Token。

// 在组件中调用登录
this.$store.dispatch('login', response.data.token);

路由守卫验证 Token

使用 Vue Router 的路由守卫验证 Token，确保用户在访问受保护路由时已登录。

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

在路由配置中标记需要认证的路由。

{
  path: '/dashboard',
  component: Dashboard,
  meta: { requiresAuth: true }
}

Token 过期处理

在响应拦截器中检查 Token 是否过期，过期时跳转到登录页面或刷新 Token。

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

使用第三方库管理 Token

可以使用如 vue-authenticate 或 vue-auth 等第三方库简化 Token 管理流程。这些库通常提供开箱即用的认证功能，包括 Token 存储、请求拦截和路由守卫。

// 使用 vue-auth 示例
Vue.use(require('@websanova/vue-auth'), {
  auth: require('@websanova/vue-auth/drivers/auth/bearer.js'),
  http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
  router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
});