读取 Angular 中 CanActivate 路由保护中的 cookie

Question

我正在使用 Angular 9 和CanAngular接口来保护在用户未登录时调用的路由。在登录期间，我设置了一个 cookie session_key ，但我不知道如何在canActivate中再次读取/获取 cookie 值function 的接口。

export class AuthGuard implements CanActivate {
    constructor(
        private router: Router,
        private accountService: AccountService
    ) {}

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
            if (cookieExists("session_key")) {  <---------------------- 
                // authorised so return true
                return true;
            }

            // not logged in so redirect to login page with the return url
            this.router.navigate(['/account/login'], { queryParams: { returnUrl: state.url }});
            return false;
    }
}

我会为 cookieExists 使用哪些现有的cookieExists ？

Answer 1

您可以使用一个简单的实用程序 function 来检查它：

export function cookieExists(cookie: string): boolean { 
  return document.cookie
    .split(';')
    .some((item) => item.trim().startsWith(`${cookie}=`)));
}

并在你的canActivate中使用它：

canActivate(): boolean | UrlTree {
  if (cookieExists('session_key')) {
    return true;
  }

  return this.router.createUrlTree(
    ['/account/login'],
    { queryParams: { returnUrl: state.url }}
  );
}

从守卫重定向的正确方法是返回UrlTree

Answer 2

如果您使用的是ngx-cookie-service ，则需要在 authguard 中导入 Cookie 服务。

import { CookieService } from 'ngx-cookie-service';

并在构造函数中注入 cookie 服务

constructor(private cookieService : CookieService){}

然后您可以使用以下代码访问cookie存储

if (cookieService.get("session_key")) { 
   return true;
}

您可以使用以下代码设置 cookie

cookieService.set('session-key','some-value');