时间戳

首页 > 解决方案 > 使用函数在 fetch 中检索令牌

authentication - 使用函数在 fetch 中检索令牌

问题描述

我在我的 Vuejs 3 应用程序中使用 fetch。我存储来自后端的令牌，以便在使用身份验证的路由上执行来自前端的任务。

我有一个名为 authHeader() 的函数，它检索前面本地存储的令牌，如下所示：

export default function authHeader() {
  let user = JSON.parse(localStorage.getItem('user'));
  if (user && user.token) {
    return { 'x-access-token': user.token };
  } else {
    return {};
  }
}

当我获取所有帖子时，这很好用：

async getAllPosts() {
  const res = await fetch(`http://localhost:3000/api/publications`, {
    method: 'GET',
    headers: authHeader()
  })
  const posts = await res.json()
  return posts       
 }

但是我很难发布，因为我正在添加内容类型并且无法弄清楚如何以及在何处放置我的 authHeader() 函数。我尝试给它“授权”作为键，但我在标题中得到一个带有“授权：[对象对象]”的 401。

这是代码：

async addPost(newPost) {
const res = await fetch('http://localhost:3000/api/publications', {
  method: 'POST',
  headers: {
    'Authorization' : authHeader(),
    'Content-type' : 'application/json'
    },
  body: JSON.stringify(newPost),
})
const data = await res.json();
this.posts = [...this.posts, data]
}

在这种情况下，我应该如何使用我的 authHeader() 函数将令牌传递给后端？

标签： authenticationhttp-headersfetchvuejs3

解决方案

推荐阅读