javascript - 如何从前端处理 jsonwebtoken

Question

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

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

如果我这样做 -

window.location.href = "/blogs";

那么我将无法发送身份验证 token ，或者我应该说我不知道​​如何使用这种方法发送身份验证 token 。

在堆栈溢出上，我读到了有关此技术的内容 -

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

但我不认为开发人员在他们的项目中使用这种技术，因为据我所知， token 应该通过 header 发送。

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

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

Answer 1

我会尽量让它变得简单。作为示例，我将使用我的一个项目中的代码。

首先，您没有解释如何在服务器端检查和验证 token 。因此，为了使说明更加完整，我将提供一些代码。

在服务器端，我使用一个简单的函数来检查收到的每个请求，并根据验证和确认过程，我将更新收到的请求，然后将其发送到解析器。

注意:当前代码使用 Express

在我的示例中，我将 token 存储在请求 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 是否包含授权 token ，如果是，我们会验证并验证 token 。如果验证成功完成，我会更新请求内的 isAuth 字段并将其设置为 true。

app.use(isAuth);

现在您将能够访问解析器内的 isAuth 并根据其值返回数据(例如:如果为 false，则抛出错误)；

现在，对于客户端来说，由于我们希望 token 存储在 headers Authorization 字段中，因此我们需要在发送请求之前设置它。

确保已将 token 保存在客户端。就我而言，用户需要登录才能接收新 token ，以便将新创建的 token 存储在客户端存储中。现在，在发送每个请求之前，从存储中访问 token 并用它更新请求 header 。

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

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

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

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

最简单、安全的方法是将其保存在本地或 session 缓存中(根据谷歌经过小型研究后得出的结论)并在每个请求时访问它。在服务器端创建 json Web token 时，您可以指定过期时间，因此如果 token 在一段时间内未使用，它将无效，用户需要重新进行身份验证才能接收其他 token 并将其保存在客户端存储中.

经过一番研究，我决定用 graphql 重写我的后端(apollo-server/express) 用于服务器端，apollo-client 用于客户端。由于 apollo-client 提供了一个库来管理客户端的本地缓存，因此它简化了任务。

我希望我已经回答了您的问题，这可以帮助您，如果我犯了错误，我们深表歉意。