当重新加载页面错误 401 时，我正在使用 Angular 5

Question

我使用SpringBoot和JWT生成认证token，浏览链接访问页面时没有报错，但是重新加载页面时出现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);
    }
}

当我通过网站链接访问页面时总是调用拦截器，当我重新加载页面时没有调用拦截器，我相信错误一定是在这一点上，可以在第一个看到过程我通过'Authorization'标头传递令牌，在第二个过程中，启动401错误，'Authorization'标头没有通过，因为没有调用拦截器，简而言之，有没有人有任何线索这个错误的原因是什么？

Answer 1

您已经提到拦截器没有被调用，但我认为拦截器每次都被调用，而不是下面的代码部分正在创建问题。

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

}

isLoggedIn() 和 buscaChaveUsuario() 函数从应用程序中存在的一些变量（即 Angular 项目）中获取值。因此，当我们刷新页面时，应用程序将重新加载，这些变量将被清除，当调用再次进入拦截器时，值将不会出现在那里，这就是重新加载时“授权”标头不存在的原因。

您可以尝试的一个快速解决方案是将这些值放在浏览器的 localStorage 中，这样在重新加载时不会被清除，并在用户注销时从 localStorage 中删除这些值。

Answer 2

有几种处理方法。

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

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

现在，您可以使用Angular Guard 来保护您的 mysite.com/home 路由，该路由实质上可以检查会话存储中是否存在有效的、未过期的令牌。如果没有，则在守卫上返回 false 并重定向到禁止页面。