Question

我的Anuglar 4应用有多条路线，在下面的示例中只有两条路线 - 记录和项目列表。所以基本上有两条路线：http://localhost:4200/#/和http://localhost:4200/#/items。当我在http://localhost:4200/#/items并重新加载页面时，它会自动导航到http://localhost:4200/#/，从我的观点来看，这是错误的行为。有一种很好的方法可以预防吗？目前我在http://localhost:4200/#/items并重新加载页面以保持同一页面？

下面我发布了一些可能对您有帮助的配置：

<base href="/">

  imports: [
    RouterModule.forRoot([
      {path: '', component: LoginComponent},
      {path: 'items', component: ItemListComponent, canActivate: [AuthGuard]},
    ])
  ],

      providers: [
        {provide: HTTP_INTERCEPTORS, useClass: CustomHttpInterceptor, multi: true},
        {provide: LocationStrategy, useClass: HashLocationStrategy},
        AuthenticationService,
        AuthGuard,
      ],

AuthGuard：

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthenticationService) {
  }

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

@Injectable()
export class AuthenticationService extends DataService{

  private _isLoggedIn: boolean;

  constructor(http: HttpClient) {
    super(http);
    this._isLoggedIn = false;
    this.url = '/api/auth';
  }

  get isLoggedIn(): boolean{
    return this._isLoggedIn;
  }

  set isLoggedIn(value: boolean){
    this._isLoggedIn = value;
  }

服务器返回令牌。重新加载后的信息仍然存在于localStorage中的有效令牌

Answer 1

这与authtoken无关，但与你的canActivate无关。初始化应用程序时，表示应用程序已销毁并重新创建。因此，当在需要登录状态的路线上时，您最初将_isloggedIn声明为false。所以警卫工作正常，并将您重定向到LoginComponent。

如果页面刷新，您可能希望使用localStorage或其他内容来保持您的登录状态。

Answer 2

添加pathMatch：'full'

{path: '', component: LoginComponent, pathMatch: 'full'},

Answer 3

Angular是一个基于单页应用程序的框架。页面刷新仅在应用程序初始化时完成。您可以使用双向绑定，调用后端并更新响应中收到的项目列表。您也可以尝试router.navigate（['/ items']），它只有在您从其他组件导航时才有效。

重新加载Angular 4后，请保持同一页面

3 个答案: