Vuex 管理用户令牌并优化本地存储：无缝的令牌处理与过期的烦恼

2024-02-08 07:18:53

在现代 Web 应用程序中，用户身份验证和授权至关重要。Vuex 是 Vue.js 的状态管理库，可以帮助我们高效地处理用户令牌并优化本地存储操作。本文将深入探讨如何使用 Vuex 来实现这些目标，消除令牌过期的烦恼，并确保应用程序的安全性和便利性。

1. 处理用户令牌

当用户成功登录时，服务端会返回一个身份令牌（Token）。这个令牌代表了用户在应用程序中的身份，允许他们访问受限资源和执行授权操作。

1.1 创建 Vuex 模块

要管理用户令牌，我们首先需要创建一个 Vuex 模块。这将允许我们在整个应用程序中集中访问和操作令牌。

// store/modules/auth.js
export const auth = {
  state: {
    token: null, // 存储用户令牌
  },
  getters: {
    getToken(state) {
      return state.token;
    },
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
    },
  },
};

1.2 存储和获取令牌

一旦我们有了 Vuex 模块，就可以在组件中存储和获取用户令牌。

// component.vue
import { mapGetters, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapGetters(['getToken']),
  },
  methods: {
    ...mapMutations(['setToken']),
    login() {
      // 从服务端获取令牌...
      this.setToken(token);
    },
  },
};

2. 优化本地存储

在大多数 Web 应用程序中，用户令牌通常存储在本地存储中，以便在后续会话中保持用户登录状态。然而，本地存储的操作可能会变得繁琐和低效。

2.1 封装本地存储操作

我们可以通过创建一个助手方法来封装本地存储操作，使其更易于使用。

// utils/storage.js
export function setToken(token) {
  localStorage.setItem('token', token);
}

export function getToken() {
  return localStorage.getItem('token');
}

2.2 在 Vuex 中使用封装方法

在 Vuex 模块中，我们可以使用这些封装方法来简化令牌存储。

// store/modules/auth.js
export const auth = {
  // ...
  mutations: {
    setToken(state, token) {
      setToken(token);
    },
    getToken(state) {
      return getToken();
    },
  },
};

3. 优化设置令牌与令牌过期

在实际应用程序中，令牌通常会过期，需要定期更新或刷新。

3.1 拦截器

要处理令牌过期，我们可以使用 Vuex 拦截器。拦截器允许我们在对 API 进行调用之前和之后执行操作。

// store/index.js
const store = new Vuex.Store({
  // ...
  interceptors: {
    request(config) {
      const token = store.getters.getToken;
      if (token) {
        config.headers['Authorization'] = `Bearer ${token}`;
      }
      return config;
    },
    response(response) {
      return response;
    },
  },
});

3.2 刷新令牌

在拦截器中，如果令牌已过期，我们可以执行刷新操作以获取新令牌。

// store/index.js
const store = new Vuex.Store({
  // ...
  interceptors: {
    // ...
    request(config) {
      const token = store.getters.getToken;
      if (token && isTokenExpired(token)) {
        // 执行刷新操作...
      }
      return config;
    },
  },
});