Javascript 当抛出重新加载页面错误401时，i'；我使用角度5

我使用SpringBoot和JWT生成身份验证令牌，当我通过浏览链接访问页面时，不会发生错误，但当我重新加载页面时，会发生401错误，下面是过程

过程正常：

GENERAL:
Request URL: http://localhost:8080/corridas/aposta?idUsuario=10&size=5&page=0&sort=id,desc
Referrer Policy: strict-origin-when-cross-origin

Response Headers:
Access-Control-Allow-Credentials: true
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Connection: keep-alive
Content-Type: application/json
Date: Thu, 29 Oct 2020 03:02:54 GMT
Expires: 0
Keep-Alive: timeout=60
Pragma: no-cache
Transfer-Encoding: chunked
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block

Request Headers:
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: pt-BR,pt;q=0.9,en-US;q=0.8,en;q=0.7
Authorization: eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJ1c3VhcmlvNEB0ZXN0ZS5jb20uYnIiLCJjcmVhdGVkIjoxNjAzOTM3ODY2NTMyLCJleHAiOjE2MDQ1NDI2NjZ9.C-kbadiNZpcKrFgX7kiymJQfigmHe9ZKIGLlMYxYiZaLBbf0P-JY271hV0Tx2toV3I9ZemyGVwgaAp2tDQNF-A
Connection: keep-alive
Cookie: usuario=Fantasma; token=eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJ1c3VhcmlvNEB0ZXN0ZS5jb20uYnIiLCJjcmVhdGVkIjoxNjAzOTM3ODY2NTMyLCJleHAiOjE2MDQ1NDI2NjZ9.C-kbadiNZpcKrFgX7kiymJQfigmHe9ZKIGLlMYxYiZaLBbf0P-JY271hV0Tx2toV3I9ZemyGVwgaAp2tDQNF-A;
Host: localhost:8080
Referer: http://localhost:8080/corridas/torcida
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like     Gecko) Chrome/86.0.4240.111 Mobile Safari/537.36   

重新加载页面后处理401

General:
Request URL: http://localhost:8080/corridas/aposta?idUsuario=10&size=5&page=0&sort=id,desc
Request Method: GET
Status Code: 401 
Remote Address: [::1]:8080
Referrer Policy: strict-origin-when-cross-origin

Response Headers:
Access-Control-Allow-Credentials: true
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Connection: keep-alive
Content-Language: pt-BR
Content-Length: 301
Content-Type: text/html;charset=UTF-8
Date: Thu, 29 Oct 2020 03:03:54 GMT
Expires: 0
Keep-Alive: timeout=60
Pragma: no-cache
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block

Request Headers:
Accept:     text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate, br
Accept-Language: pt-BR,pt;q=0.9,en-US;q=0.8,en;q=0.7
Cache-Control: max-age=0
Connection: keep-alive
Cookie: usuario=Fantasma; token=eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJ1c3VhcmlvNEB0ZXN0ZS5jb20uYnIiLCJjcmVhdGVkIjoxNjAzOTM3ODY2NTMyLCJleHAiOjE2MDQ1NDI2NjZ9.C-kbadiNZpcKrFgX7kiymJQfigmHe9ZKIGLlMYxYiZaLBbf0P-JY271hV0Tx2toV3I9ZemyGVwgaAp2tDQNF-A;
Host: localhost:8080
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: none
Sec-Fetch-User: ?1
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like     Gecko) Chrome/86.0.4240.111 Mobile Safari/537.36

这里是角度拦截器

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>  {
    let authRequest: any;
    if (this.shared.isLoggedIn()){
        authRequest = req.clone({
            setHeaders: {
                'Authorization': this.shared.buscaChaveUsuario()
            }
        });
        return next.handle(authRequest);
    } else {
        return next.handle(req);
    }
}

intercept（req:HttpRequest，next:HttpHandler）：可观察{
让我们请求：任何；
if（this.shared.isLoggedIn（））{
authRequest=req.clone({
集合标题：{
“授权”：this.shared.buscahaveusuario（）
}
});
返回next.handle（authRequest）；
}否则{
返回next.handle（req）；
}
}

---

当我通过网站链接访问页面时，拦截器总是被调用，当我重新加载页面时，拦截器没有被调用，我相信错误一定就在这一点上，可以看到，在第一个过程中，我通过“授权”头传递令牌，在第二个过程中，在401错误被启动的地方，由于没有调用拦截器，“Authorization”头不会被传递。简言之，有人知道这个错误的原因吗？

有几种处理方法

实例： 我建议您在第一次成功登录站点时，可以将jwt令牌存储在浏览器存储器中

也就是说，用户在

mysite.com/login

中提供了一些有效的凭据，如果凭据没有问题，您的站点将把这些凭据存储在浏览器存储中，并假设web的默认行为是，在成功登录时，它应该将用户重定向到mysite.com/home

---

现在，您可以使用

角度保护装置来保护您的mysite.com/home路由，该装置基本上可以检查会话存储上是否有有效的、未过期的令牌。如果没有，则在guard上返回false并重定向到禁止页面。
您在问题中提到，拦截器没有被调用，但我认为拦截器每次都被调用，而下面的代码部分产生了问题

if (this.shared.isLoggedIn()){
    authRequest = req.clone({
        setHeaders: {
            'Authorization': this.shared.buscaChaveUsuario()
        }
    });
    return next.handle(authRequest);

}

由于
isLoggedIn（）
和
buscahaveusuario（）
函数从应用程序中存在的一些变量（即角度项目）中获取值。因此，当我们刷新页面时，应用程序将重新加载，这些变量将被清除，当调用再次到达拦截器时，值将不存在，这就是为什么重新加载时“授权”标题不会出现的原因

您可以尝试的一个快速解决方案是将这些值放在浏览器的localStorage中，以便在重新加载时不会清除这些值，并在用户注销时从localStorage中删除这些值。
您在应用程序中添加绑定拦截器的位置和方式？@Crocsx您好Crocsx，很抱歉响应延迟，请继续，拦截程序正在app.module的提供程序中使用，下面是它的名称<代码>代码提供者：[SharedService，AuthGuard，{Provider:HTTP_拦截器，useClass:AuthInterceptor，multi:true}，

@Manoj所以，很抱歉响应延迟，我在这里做了一个测试，在记录之后，我将令牌添加到本地存储：。

localStorage.setItem（'token'，this.shared.token）在拦截器上，我将本地存储值作为'Authorization'参数传递。
Authorization'：localStorage.getItem（'token'）
但当我进入浏览链接的页面时，如果我更新或尝试访问直接页面，错误仍然存在。调试代码时，仅当我浏览链接时才会调用拦截器，而当我更新页面时，不会调用拦截器。@RonaldCalazans您能验证您只导入了一次HttpClientModule吗正如这篇文章Hello@AJcodes中指定的，所以，在阅读了推荐我的文章之后，我看了一下我的代码，我只使用了一个“HttpClientModule”…页面重新加载工作正常，在开发过程中的某个时候，这个功能中断了，我实现了一个AuthGuard，在没有身份验证的情况下向登录页面发送访问权限，它工作正常，系统现在已经中断了AuthGuard，不再工作了…正如我在主要帖子中报告的那样，当我尝试重新加载页面或尝试访问页面时通过直接链接（例如：localhost:8080/运行/事件）给出错误401我找到了错误点，但我没有找到解决方案呵呵…我正在将前端和后端打包在一起。war，我做了一个测试，我在端口4200上升级了前端，在端口8080上升级了后端，这样我可以重新加载页面，如果我从war运行前端。war我无法重新加载页面，有什么提示吗？很抱歉延迟回复ing，所以感谢您的回复：），系统的行为正是您所建议的：该用户登录，并被定向到“主页”，如果我通过单击打开的页面按钮导航，但如果我重新加载页面，则始终会出现错误401，我无法重新加载任何页面，我还实现了AuthGuard，以防止该用户未经授权访问未登录。