Javascript 如何从前端处理jsonwebtoken

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

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

如果我这样做-

window.location.href=“/blogs”

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

在这里，我读到了有关堆栈溢出的技术-

window.location.href=“/blogs？token=”

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

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

---

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

在您的请求中添加

授权

标题

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

---

这是一个将头添加到ajax请求的示例。

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

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

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

注意：当前使用的代码为Express

在我的示例中，我将令牌存储在请求头

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();
}

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

app.use(isAuth);

现在，您将能够访问解析程序内部的

isAuth

，并根据其值返回数据（例如：如果为false，则抛出错误）

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

确保已在客户端保存令牌。 在我的例子中，用户需要登录以接收新令牌，这样他就可以将新创建的令牌存储在客户端存储中。 现在，在发送每个请求之前，从存储器访问令牌，并使用它访问updare请求头

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

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

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

我在这里面临的问题是在用户会话请求之间存储令牌

最简单和安全的方法是将其保存在本地或会话缓存中（根据谷歌的一项小型研究），并在每次请求时访问它。 在服务器端创建json web令牌时，您可以指定一个expirery，因此如果令牌在某个时间内未使用，它将无效，用户需要重新验证以接收其他令牌并将其保存在客户端存储中

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

---

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

您可以使用标题发送邮件token@muasif80如果我这样做了，我该如何更改窗口的位置，或者换句话说，我该如何更改页面？如果我理解得很好，您不想使用JSON web令牌作为查询参数吗？就像他们在这里谈论的那样@Karlan不，如果我没有正确解释我的问题，我很抱歉。我想知道的是，我如何使用另一种方法发送jsonwebtoken，这样我就可以发送令牌并更改页面（在我发出此请求时，我当前处于该页面上），好的，您不想使用express中间件吗？首先检查用户是否为有效令牌？以这种方式保护路由。我知道如何向标头添加身份验证令牌，但不知道如何使用这种方法更改页面（我当前所在的页面）。假设您正在手机上使用fb，当您按下通知图标或新闻提要图标时，您会看到另一个页面被打开。我想知道我是如何获得这种行为的。在您的

响应中，我要告诉您的是，每次您发出请求时，首先验证令牌，并且在该响应成功后，调用您的方法，就是这样。这是一个嵌套调用。在该响应上切换或加载您的视图您能解释一下您在提出请求时是如何从客户端添加授权的吗？？因为在这里我可以看到您正在从请求中获取授权令牌。在登录时，我生成一个新令牌并将其发送给客户端。客户端使用新生成的令牌接收响应，并将其保存在存储器中，以便在当前会话期间访问它。