Question

我正在使用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);
    }
}

当我通过网站链接访问页面时，总是会调用拦截器，而当我重新加载页面时，则不会调用拦截器，我认为错误必须恰好在这一点上，有可能在第一时间看到我正在通过“ Authorization”头传递令牌，在第二个过程中，启动401错误，未传递“ Authorization”头，因为没有调用拦截器，总之，有人对它有任何线索吗？该错误的原因？

Answer 1

有几种处理方法。

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

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

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

Answer 2

您曾经提到有问题，拦截器没有被调用，但我认为拦截器每次都会被调用，而下面的代码会引起问题。

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

}

由于isLoggedIn()和buscaChaveUsuario()函数正在从应用程序即Angular Project中存在的某些变量中获取值。因此，当您刷新页面应用程序时，它将重新加载并且将清除那些变量，并且当再次调用拦截器时，那里将不再存在值，这就是为什么在重新加载时“ Authorization”标头不起作用的原因。

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

重新加载时，抛出页面错误401，我使用的是Angular 5

2 个答案: