javascript - 通过 cookie 中的令牌进行 Angular 保护路由

Question

我通常将用户令牌保存在本地存储中。我将本地存储中的“令牌”密钥作为 CanActivate 方法检查以保护某些路由。如果密钥在那里，我让用户登陆页面，否则我重定向到登录页面。

现在我正在使用 cookie 来存储身份验证令牌。令牌在服务器登录时直接存储在 cookie 中（set-cookie、secure: true、httpOnly: true）。

由于httpOnly，我无法检查是否存储了来自js的令牌，并且我不知道如何保护我的路线。我怎样才能像以前一样完成类似的处理？我是否应该在登录时将某些内容保存在本地存储中，然后检查密钥是否存在？我可以检查密钥是否以某种方式存储在 cookie 中吗？

标签： javascriptangularcookiesjwtlocal-storage

Answer 1

当我收到第一个登录响应时，我将令牌返回给客户端并设置 httponly cookie，并解析我只返回一次的令牌，我只存储令牌的有效负载，而不是整个令牌，它具有 user_id 和到期日期并在我的警卫中使用它作为标志进行检查。我还有一个 httpinterceptor，它检查重新路由到登录的 401 错误。因此，如果它过期，我将本地存储设置为 null，或者如果我收到 401 错误，我还将存储的 user_id 和过期日期设置为 null。

您会发现实际上 httponly cookie 最糟糕的部分是向服务器发送注销请求以使服务器端的 cookie 过期，并且还有一个黑名单，其中包含模型中的令牌和用户 ID，因此您知道一旦您注销就保存该令牌,

另一个问题是令牌的刷新，确保将第一个令牌的exp时间保持在5分钟左右，并在需要时刷新。