1

在 Angular 4 上使用 Asp Core 和来自 asp core 的默认模板。警卫工作，但在页面刷新时我得到了不需要的行为。canActivate刷新受保护的路由时，它会在is时简要显示我的登录页面true。下图显示了这种行为。注意刷新屏幕会闪烁红色（我的登录页面）。

在此处输入图像描述

重现问题的步骤：

  1. 创建项目dotnet new angular
  2. 运行dotnet restore和npm install
  3. 添加文件auth.guard.ts（下面的代码）
  4. 添加文件auth.service.ts（下面的代码）
  5. 添加登录组件
  6. app.modal.shared.ts将服务和守卫添加到（下面的代码）中的路线
  7. 在主页组件上添加登录按钮
  8. 运行程序并点击登录按钮
  9. 导航到柜台路线
  10. 按F5刷新，在显示计数器路由之前会出现登录页面（应该不会显示登录canActivate页面true）

如果您希望查看任何其他代码或有任何疑问，请告诉我。在过去的两天里，我一直在用 Observables、地图和订阅尝试各种事情，但没有结果。任何帮助将不胜感激。提前致谢！

auth.guard.ts

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router'
import { AuthService } from './auth.service';
@Injectable()
export class AuthGuard implements CanActivate {
  constructor(
    private authService: AuthService,
    private router: Router) {
  }
  canActivate() {
    if (!this.authService.isLoggedIn()) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

auth.service.ts

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { Router } from '@angular/router';
import { Response, Headers, RequestOptions } from '@angular/http';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
import { Observable } from 'rxjs/Rx';
import { BehaviorSubject } from 'rxjs/Rx';
@Injectable()
export class AuthService {
  private baseUrl: string = '';
  private loggedIn = false;
  uid: string | null;
  constructor(
    private router: Router,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {
    if (isPlatformBrowser(this.platformId)) {
      this.loggedIn = !!localStorage.getItem('auth_token');
    }
  }
  login() {
    this.loggedIn = true;
    localStorage.setItem('auth_token', 'test');
  }
  logout() {
    localStorage.removeItem('auth_token');
    localStorage.removeItem('uid');
    window.location.replace('/home'); // redirect as we want all var and obj to reset
  }
  isLoggedIn() {
    return this.loggedIn;
  }
}

app.module.shared.ts

...
RouterModule.forRoot([
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'login', component: LoginComponent },
    { path: 'counter', component: CounterComponent, canActivate: [AuthGuard] },
    { path: 'fetch-data', component: FetchDataComponent, canActivate: [AuthGuard] },
    { path: '**', redirectTo: 'home' }
])
...

编辑：添加了问题的 gif。

编辑：发现这是server-side prerendering的问题。我目前正在研究如何设置令牌存储服务并将其传递给服务器。

4

0 回答 0