为什么授权服务不记得身份验证？

Question

我有一个可以正常工作的 auth guard 和 auth 服务。但是，当我尝试在新的浏览器选项卡中打开我的应用程序时，我没有登录。我的应用程序需要我再次登录。我认为身份验证服务必须在应用程序未重新启动但无法正常工作时记住我。如何更改此设置以记住我而无需为每个新选项卡输入登录名和密码？

@Injectable()
export class AuthService {

  private loggedIn = false;

  get isLoggedIn() {
    return this.loggedIn;
  }

  constructor(private router: Router) {
  }

  login(user: User) {
    this.loggedIn = true;
    window.localStorage.setItem('user', JSON.stringify(user));
    this.router.navigate(['/vds-list']);
  }

  logout() {
    this.loggedIn = false;
    window.localStorage.clear();
    this.router.navigate(['/login']);
  }
}

@Injectable()
export class AuthGuard implements CanActivate, CanActivateChild {

  constructor(private authService: AuthService, private router: Router) {
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    console.log(state.url);
    if (this.authService.isLoggedIn) {
      return true;
    } else {
      this.router.navigate(['/login'], {
        queryParams: {
          accessDenied: true
        }
      });
      return false;
    }
  }

  canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.canActivate(childRoute, state);
  }
}

我有一个 loggedIn 变量和 isLoggedIn 方法必须 return true 在成功验证一次后，但不幸的是，它只适用于同一个选项卡。或者换句话说，为什么 AuthService#loggedIn 是 false 但我已通过身份验证。

Answer 1

您需要先在新标签页（或刷新页面）中从 localStorage 读取 user。

尝试将此添加到 AuthService 的构造函数中：

try {
  let userJson = window.localStorage.getItem('user');
  let user = JSON.parse(userJson);
  this.isLoggedIn = !!user;
} catch (e) {
  // no user
}

为什么授权服务不记得身份验证？

Why auth service don't remember authentication?

typescript

angular2-services