如何从前端处理jsonwebtoken

Question

我正在开发一个全栈项目，用户可以在其中创建帐户、访问他们的个人资料、创建博客、阅读他们的博客、删除他们的博客等。为了执行所有这些任务（注册和登录除外）用户必须经过身份验证。

我完成了后端，但我不明白如何将 jsonwebtoken 从客户端发送到服务器端（我知道如何从服务器端发送它）。我知道如何从服务器获取令牌并将它们存储在浏览器的 locaStorage 中，但我不知道如何在我请求阅读博客或删除博客或在阅读完所有内容后访问我的个人资料时将它们发送回服务器我的博客。

如果我这样做 -

window.location.href = "/博客";

然后我将无法发送身份验证令牌，或者我应该说我不知道如何使用这种方法发送身份验证令牌。

在堆栈溢出时，我读到了这项技术-

window.location.href = "/blogs?token=";

但我认为开发人员不会在他们的项目中使用这种技术，因为据我所知，令牌应该通过 headers.

发送

如果我总结我的问题，我只想知道如何将身份验证令牌发送到服务器以及更改不同路由的页面，例如显示我所有博客的不同页面和仅显示我的博客的另一个页面轮廓。如果其他未通过身份验证的人尝试访问个人资料路径或博客路径，将出现 401 错误。

如果有人能解决我的困惑或推荐一本书或一篇文章来解决我的困惑，那将是一个很大的帮助。

Answer 1

将 authorization header 添加到您的请求中

headers: {
    "authorization": "Bearer your_token"
}

它和将 header 添加到 ajax 请求的示例。

Answer 2

我会尽量简化。作为示例，我将使用我的一个项目中的代码。

首先，您没有解释如何在 server-side 上检查和验证令牌。为了让解释更完整，我会提供一些代码。

在 server-side 上，我使用一个简单的函数来检查收到的每个请求，并根据验证和验证过程，在将收到的请求发送到解析器之前更新它。

注意：当前代码使用 Express

在我的示例中，我将令牌存储在请求 header Authorization 字段中。

const isAuth = async (req, res, next) => {
    const authHeader = req.get('Authorization');

    // if is no authorization field in header, we call 
    if (!authHeader) {
        req.isAuth = false;
        return next();
    }
    const token = authHeader.split(' ')[1]; // `Bearer XXXXXXXXXXXXXXXXXXXXX...`

    if (!token) {
      req.isAuth = false;
      return next();
    }
    // Here i decode the token
    const decodedToken = jwt.verify(token, 'SomeSecretWord');

    req.isAuth = true;
    return next();
}

在收到的每个请求中，我们检查 header 是否包含授权令牌，如果是，我们验证并验证令牌。如果验证成功完成，我会更新请求中的 isAuth 字段并将其设置为 true。

app.use(isAuth);

现在您将能够访问 isAuth 内部解析器和 return 基于其值的数据（例如：如果为 false 则抛出错误）；

所以现在，对于 client-side，因为我们希望令牌存储在 headers 授权字段中，所以我们需要在发送请求之前设置它。

确保已经在 client-side 上保存了令牌。在我的例子中，用户需要登录才能接收新令牌，因此他将新创建的令牌存储在 client-side 存储中。现在在发送每个请求之前，从存储中访问令牌并使用它更新请求 header。

const headers = {
  Authorization: "Bearer XXXXXXXXXXXXXXXXXXXXXX",
};

const reqInit = {
  method: 'GET',
  headers: headers,
};

// send request using fetch
fetch('/someLocation', reqInit)
  ...

我在这里遇到的问题是在用户请求之间存储令牌 session。

最简单和安全的方法是将其保存在本地或 session 缓存中（根据 google 经过小型研究）并在每次请求时访问它。在 server-side 上创建 json 网络令牌时，您可以指定一个过期时间，因此如果令牌在特定时间内未使用，它将无效，用户将需要重新验证以接收另一个令牌并保存它在他的 client-side 存储中。

经过一些研究，我决定用 graphql 重写我的后端 (apollo-server / 表示）server-side 和 apollo-client client-side。由于 apollo-client 提供了一个库来管理 client-side 上的本地缓存，它简化了任务。

希望我已经回答了你的问题，对你有所帮助，如果我犯了错误，我深表歉意。

如何从前端处理jsonwebtoken

How to handle jsonwebtoken from front end

javascript

node.js

jwt

web-development-server