Question

我在互联网上搜索过，找不到答案。我发现this post on the route guard not working on browser refresh，解决方案无效，因为我认为它是特定于Firebase的。

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpModule,
    MaterialModule,

    HomeModule,
    LoginModule,
    SettingsModule,

    RoutingModule
  ],
  exports: [
    RoutingModule
  ],
  providers: [
    AuthGuardService,
    AuthService,
    /* other services */
  ],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

我在各种路由模块中定义了各种路由：

app-routing.module.ts （全局路由配置）

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  // Default route
  {
    path: '**',
    redirectTo: '',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class RoutingModule {}

登录-routing.module.ts

const routes: Routes = [
  // Login
  {
    path: '',
    component: LoginComponent
   }
];

主-routing.module.ts

const routes: Routes = [
  // Home
  {
    path: 'home',
    component: HomeComponent,
    canActivate: [AuthGuardService],
    canActivateChild: [AuthGuardService]
  }
];

设置-routing.module.ts

const routes: Routes = [
  // Settings
  {
    path: 'settings',
    component: SettingsComponent,
    canActivate: [AuthGuardService]
  }
];

以下是我使用的Auth Guard，它是从this article about logging in with jwt修改的：

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, CanLoad, Route } from '@angular/router';
import { AuthService } from '../services';
import { JwtHelper } from 'angular2-jwt';

@Injectable()
export class AuthGuardService implements CanActivate {
  private jwtHelper: JwtHelper = new JwtHelper();

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

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return this.navigateToLogin();
  }

  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return this.navigateToLogin();
  }

  private navigateToLogin(): boolean {
    if (localStorage.getItem('token')) {
      // if logged in & token not expired, return true
      if(!this.jwtHelper.isTokenExpired(localStorage.getItem('token'))) {
        return true;
      }
      // if token expired, logout 
      else {
        this.authService.logout();
      }
    }

    // re route to login
    this.router.navigate(['']);
    return false;
  }
}

通过当前的实现，以下是行为：

如果用户未登录

转到/工作
在网址中转到/home或/settings重定向到/（登录屏幕）
转到任意随机网址（如/fjdsakfjkla）重定向到/（登录屏幕）

如果用户已登录

在网址中键入/home或/settings会指导用户更正路线
转到任意随机网址（如/fjdsakfjkla）重定向到/home
键入/（登录页面）会将用户定向到/home

问题是，在登录时，在浏览器刷新期间，您将被重定向到/home。如果用户登录后如何实现，浏览器刷新将保持路由？例如，如果我在/settings，则浏览器刷新不会重新路由到/home并继续/settings。

目前： /settings→浏览器刷新→/home
渴望： /settings→浏览器刷新→/settings

Angular2浏览器刷新无法使用身份验证后卫

0 个答案: