当前位置：首页 > VUE

vue实现登录保存token

2026-02-20 16:58:31VUE

使用Vue实现登录保存Token的方法

本地存储Token

登录成功后，将Token保存到本地存储（localStorage或sessionStorage）。localStorage持久化存储，sessionStorage会话期间有效。

localStorage.setItem('token', response.data.token);

Vuex状态管理

在Vuex中定义Token状态，通过mutation更新Token，便于全局访问和管理。

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

请求拦截器

在axios请求拦截器中，将Token添加到请求头中，实现自动携带Token。

vue实现登录保存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);
});

响应拦截器

在axios响应拦截器中，处理Token过期或无效的情况，跳转到登录页。

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

路由守卫

在Vue Router中使用全局前置守卫，验证Token是否存在，保护需要登录才能访问的路由。

vue实现登录保存token

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

登录逻辑

在登录组件中，调用登录接口，成功后保存Token并跳转到首页。

methods: {
  async login() {
    try {
      const response = await axios.post('/api/login', this.form);
      this.$store.commit('setToken', response.data.token);
      this.$router.push('/');
    } catch (error) {
      console.error(error);
    }
  }
}

登出逻辑

在登出方法中清除Token，并跳转到登录页。

methods: {
  logout() {
    this.$store.commit('clearToken');
    this.$router.push('/login');
  }
}

Token刷新

对于有刷新Token需求的场景，可以在响应拦截器中检测Token过期，自动调用刷新Token接口。

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