重新加载 Angular 4 后留在同一页面答案

【问题标题】：Stay at the same page after reloading Angular 4重新加载 Angular 4 后留在同一页面
【发布时间】：2018-05-09 06:58:07
【问题描述】：

我的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 中仍然保留有效的令牌

【问题讨论】：

这与服务器配置有关，您可能需要设置服务器来处理刷新，以便它返回主页 i:e index.html 并且路由会占用它从那里
从 items 路由中取出 AuthGuard 再试试看问题是否依然存在？
@ChauTran 我删除了 AuthGuard 并且它有效。是否有任何解决方法可以与 AuthGuard 一起使用？
这与您的应用程序没有从您尝试获取令牌以实现 AuthGuard 的任何位置获取令牌有关。我可以看看你的 AuthGuard 文件吗？
查看更新。

标签： javascript angular routing reload

【解决方案1】：

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

您可能希望使用localStorage 或其他方式来保持您的登录状态，以防页面刷新。

【讨论】：

这很有道理......现在去找localStorage工作;）

【解决方案2】：

添加路径匹配：'完整'

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

【讨论】：

【解决方案3】：

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

【讨论】：

它与我的问题有什么关系？？
简单明了，不能用angular重新加载页面。
我认为你错了。只需在浏览器中按下重新加载按钮，它就会重新加载。就是这样
它将重新加载，但整个应用程序会重新初始化，并且 app.module.ts 中声明的引导组件（bootstrap: [AppComponent]）将被加载。因此，即使您在 /items 中重新加载浏览器主组件时在您的情况下 /#/ 也会被加载
好的。我明白你的意思。因此，当我在服务器端使用 Spring Boot 仅用于其他 API 时，我该如何解决这个问题？因为它很烦人。