Vue - 在路由器推送上重新加载模块

Question

我每个人。我对 Vue.js 很陌生。 所以我有这个 api 模块

axios.create({
  baseURL: URL,
  headers: {
    Authorization: 'Bearer ${localStorage.getItem('token')}'
  }
})

当我在登录页面并且没有设置令牌时（localStorage.getItem('token') 返回 null），模块已经加载，因为它用于登录请求。登录成功后，我执行localStorage.setItem('token', token) 但不幸的是，api 模块不会更新其令牌，直到我从浏览器手动刷新页面（我猜它不会自行刷新，因为它是单页应用程序）结束在我的 api 请求中有空令牌，直到我刷新。

你会如何解决这个问题？

起初我认为“这是一个登录，如果我重新加载页面就可以了”，所以我从this.$router.push('/') 切换到this.$router.go('/')，但是到索引的导航被破坏了。

我们将不胜感激任何类型的解决方案。

谢谢。

Answer 1

我建议将您的 API 服务包装在 plugin 中，并使用它来管理您的 axios 实例。实现可能如下所示。

你想在你的 axios 实例中设置set the token explicitly。

ApiService.js

const axios = require('axios');

// Function to create an axios instance.
const axiosFactory = (options) => axios.create({
    ...options,
    headers: {
        Authorization: `Bearer ${localStorage.getItem('token')}`,
    }
});

// To set the token in axios and save it in localStorage
const setTokenFactory = (axios) => (token) => {
    localStorage.item('token', token);
    axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
}

// Vue plugin to set $api to axios and expose a setToken function in Vue.
const install = (Vue, axios) => {
    Vue.mixin({
        setToken: (token) => {
            setTokenFactory(Vue.protoype.$api)(token);
        }
    });
    Vue.prototype.$api = axios;
}

// Create an axios instance
const api = axiosFactory({
    baseURL: /* URL */
});
const setToken = setTokenFactory(api);
module.exports = {
    api,
    setToken,
    plugin: {
        install
    }
};

在你的main.js

const ApiService = require('./ApiService');
Vue.use(ApiService.plugin, ApiService.api);

要在 Vue 之外使用 api，您可以像这样使用它：

const { api, setToken } = require('./ApiService');

api.get();
setToken(token);

在 Vue 中，您可以使用 this.$api 来使用 axios。 要在用户登录时设置令牌，请使用 setToken 函数使用 this.setToken(token)

Answer 2

登录后也可以自行设置token， 登录后获取令牌作为响应并设置它，或者从其他请求中询问令牌。