Angular 9 - ngx-cookie-service 路径问题

Question

我正在使用ngx-cookie-service包来存储与我的应用程序相关的一些数据。 我需要在基础路径'/'上保存此cookie，这样每次就可以确切地知道如何检索它。 我的此 cookie 需要更新，当发生这种情况时，新的cookie必须存储在相同的路径(即'/')中。问题是有时候在我刷新页面时，会在新的路径下保存一个新的cookie，因此当尝试使用this.cookieService.get(cookieName, '/')检索它时，显然会失败。虽然我明确指定使用path为'/'，但并不总是发生这种情况，这使得调试变得更加困难。

这是我使用cookie的服务

const urlParamsCookieName = 'errepiuapp-url-params';

/**
 * This service keeps track of the keys used to retrieve objects from the backend.
 */
@Injectable({
  providedIn: 'root'
})
export class KeyLookupService {

  private _lookupUrlSegments = ['students', 'macro', 'lto', 'sto', 'reports'];
  private _paramsMap$: BehaviorSubject<Map<string, any>>;

  private get paramsMap() {
    return this._paramsMap$.getValue()
  }

  constructor(
    private cookieService: CookieService,
    private router: Router 
  ) {
    if (!this.router.url.includes('auth') && !this.cookieService.check(urlParamsCookieName)) {
      this.router.navigate(['/auth']);
    }
    this._paramsMap$ = new BehaviorSubject<Map<string, any>>(
      new Map<string, any>(
        this.cookieService.check(urlParamsCookieName) ? 
          this.getParamsFromCookie().map((value, i) => [this._lookupUrlSegments[i], value]) : 
          this._lookupUrlSegments.map(segment => [segment, null])
      )
    );
    this._paramsMap$.subscribe(_ => {
      this.updateCookie();    //*********** PROBLEM HERE ***********
    });
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      map(event => {
        this.updateCookie();    //*********** PROBLEM HERE ***********
      })
    ).subscribe();
    this.updateCookie();    //*********** PROBLEM HERE ***********
  }

  addParam(key: string, value: any) {
    this._paramsMap$.next(this.paramsMap.set(key, value));
  }

  public getParams(...lookupKeyword: string[]): Map<string, any> {
    if (lookupKeyword) {
      return new Map<string, any>([...this.paramsMap.keys()]
        .filter(key => lookupKeyword.includes(key))
        .map(key => [key, this.paramsMap.get(key)]));
    }
    return this.paramsMap;
  }

  private getParamsFromCookie(): any[] {
    return Array.from(this.cookieService.get(urlParamsCookieName).split(','));
  }

  private updateCookie() {
    if (this.cookieService.check(urlParamsCookieName)) {
      this.cookieService.delete(urlParamsCookieName, '/');
    }
    this.setCookie();
  }

  private setCookie() {
    this.cookieService.set(urlParamsCookieName, [...this.paramsMap.values()].toLocaleString(), undefined, '/');
  }

}

- dc_Bita98

---

嘿，你找到解决方案了吗？我也遇到了同样的问题。 - Laxminarayan

@Laxminarayan 不，我最终选择不使用cookies来实现那个目的。 - dc_Bita98

好的。感谢您的快速回复。 - Laxminarayan

@dc_Bita98 - 你在设置cookie时是否在每个地方都指定了路径为“/”？这仍然会导致问题吗？我也遇到了类似的问题。有人解决了这个问题吗？这真的很烦人，正如你所提到的，它并不总是发生。 - curiousBoy

Answer 1

import { CookieService } from 'ngx-cookie-service';
...
let Future = toInteger(Date.now()) + 5 * 60000;
this.cookies.set('session', data, { 
   expires: Future, 
   path: '/', 
   sameSite: 'Strict' 
});

- LinuxGuru

Answer 2

我曾经遇到同样的问题，后来我发现“额外”添加的cookie带来的数据与第一个cookie相同，只是路径不同。我在默认cookie中定义的路径是“/”，以覆盖我的路由，但当第二个cookie被添加时，我意识到我的路径应该是这个第二个cookie的路径，因为尽管我的初始路径是“/”（mydomain.com /），因为我在登录页面，但一旦我访问我的会话，我的路径就会改变为mydomain.com /admin/home。

此时，我的原始cookie带有“/”，但如果我导航到我的网站的某个部分，例如mydomain.com/admin/users，并按F5键，新cookie将添加路径为“/admin”，因为我确实在另一个路径上，而不是在“/”上。

因此，我将我的cookie路径设置为“/admin”，以确保如果我重新加载页面，那将是我的路径，即使部分更改，这解决了我的问题。

附言：

这是我的实际cookie，在我的网站上目前只使用了1个cookie：

TokenContants.ts

export const COOKIE_KEY = 'current_user';
export const COOKIE_PATH = '/admin';

Auth.service.ts

this.cookieService.set(COOKIE_KEY, JSON.stringify(user), { path: COOKIE_PATH, sameSite: "Strict" });

附加信息：

在这种情况下，如果您希望 cookie 在站点的所有部分中都可以访问，包括不同的路径，那么在创建 cookie 时应将其路径设置为"/"，只要您要导航到的路径是站点的更多部分是"/"，但是如果当您更改部分时路径发生变化并且按 F5 创建新 cookie，则必须将路径更改为刚添加的 cookie 的路径。

希望能帮到您，愉快编程。

- Jonathan G