axios 使用$router.push重定向后从本地存储器获取的数据为空

clj7thdc 于 2022-12-23 发布在 iOS

关注(0)|答案(1)|浏览(206)

在我的Login组件中，我请求获取一个JWT令牌，将其设置到localStorage中，然后转到主页。

const response = await axios.post('/auth/login', {
    login: this.login,
    password: this.password
});

localStorage.setItem('token', response.data);
this.$router.push('/');

在axios.js中，我用这个标记设置了header：

axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('token')}`;

在主页（我被重定向的地方），在挂接的钩子中，我试图用这个令牌请求，但是我得到了错误401，因为头授权=承载者空。但是如果我重新提交页面，所有的工作。那么为什么重定向后它是空的呢？

async mounted() {
    const response = await axios.get('cinema/items');
    this.cinemas = response.data;
  }

axios

来源：https://stackoverflow.com/questions/74849681/data-taked-from-localstorage-after-rediraction-with-router-push-is-null

1条答案

按热度按时间

1mrurvl11#

Axios interceptors是为每个请求/响应运行的函数。
在您的情况下：

axios.interceptors.request.use(
  config => {
    config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
    return config;
  },
  error => {
      return Promise.reject(error);
  }
)

在axios init中设置头文件与在每个请求中设置头文件的区别在于，init发生在获得令牌之前。
它在刷新页面时工作的原因是重新初始化了axios，这次在localStorage中找到了令牌。
请注意，您不应在每次启动应用时获取和写入新令牌。您可能希望仅在localStorage中没有令牌或现有令牌已过期时获取新令牌。

赞(0）回复(0）举报 2022-12-23

我来回答

axios 使用$router.push重定向后从本地存储器获取的数据为空

1条答案

相关问题

热门标签

最新问答