Angular Universal加载登录页面的时间很短

Question

我最近在我的项目中启用了Angular Universal。一切都如预期的那样，除了一个奇怪的问题。每当我刷新页面或点击电子邮件中导航到网页的链接时，我都会看到登录页面，然后实际页面加载。

创建样例项目并上传到Github。请记住，延迟可能不会像在我的实际项目中那样长。

Github repo link: https://github.com/pavankjadda/angular-ssr-docker

Answer 1

问题:

当Ng Express Engine加载网页，它没有访问cookie。因此，它会将用户重定向到登录页面，但一旦浏览器加载JavaScript (Angular)，它会检查cookie并验证身份验证保护，就会将用户重定向到实际的网页。理想的解决方案是在服务器端提供cookie(通过request发送)，并确保身份验证守卫通过。我试着通过server.ts发送cookie，但无法使其工作。

在:

在我找到解决方案之前，这里是我所遵循的工作。每当我们检查cookie时，确定平台是否为服务器，如果是返回true。以下是您可以进行此更改的几个地方

1. 确保authservice.ts返回true当平台是服务器

/**
* Returns true if the 'isLoggedIn' cookie is 'true', otherwise returns false
*
* @author Pavan Kumar Jadda
* @since 1.0.0
*/
isUserLoggedIn(): boolean {
return isPlatformServer(this.platformId) || (this.cookieService.get('isLoggedIn') === 'true' && this.cookieService.check('X-Auth-Token'));
}

2. 在Authentication guards
做同样的事情

@Injectable({
providedIn: 'root'
})
export class CoreUserAuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router, @Inject(PLATFORM_ID) private platformId: any,) {
}

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
const url: string = state.url;
return this.checkLogin(url);
}
/**
* Returns true if the user is Logged In and has Core user role
*
* @author Pavan Kumar Jadda
* @since 1.0.0
*/
private checkLogin(url: string): boolean {
// Return if the platform is server
if (isPlatformServer(this.platformId))
return true;

if (this.authService.isUserLoggedIn() && this.authService.hasCoreUserRole()) {
return true;
}
if (this.authService.isUserLoggedIn() && !this.authService.hasCoreUserRole()) {
this.router.navigate(['/unauthorized']);
}
// Store the attempted URL for redirecting
this.authService.redirectUrl = url;
// Navigate to the login page with extras
this.router.navigate(['/login']);
return false;
}
}

注意在这里增加了工作，以防有人有类似的问题。当我有一个实际的解决问题的方法，我会更新这个答案。

Answer 2

将认证服务中的isUserLoggedIn()函数更改为:

public async isUserLoggedIn(): Promise<boolean> {
const isLoggedIn = await this.cookieService.check("token");
return isLoggedIn;
}