javascript - Angular4应用页面刷新导致黑屏

Question

Angular 4.4.0 版本 Web 应用程序(主页) 当 canActive() 方法返回 false 时，页面刷新导致黑屏。 (获取网址:localhost:4200/#/)

在这种情况下，应用程序应该默认导航到登陆页面(登录页面)。但在这种特殊情况下并没有发生。取消导航会导致黑屏，并在再次刷新时起作用。

app.routing.ts

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

export const routes: Routes = [
   { path: '', redirectTo: 'pages', pathMatch: 'full' },
   { path: '**', redirectTo: 'pages/landingpage' }
];

 export const routing: ModuleWithProviders = RouterModule.forRoot(routes, { useHash: true });

pages.routing.ts

import { Routes, RouterModule }  from '@angular/router';
import { Pages } from './pages.component';
import { ModuleWithProviders } from '@angular/core';
import { landingPage } from './landingPage/landingPage.component'
import { SignOutService } from '../providers/navlifecycleservices/signout-navservice';
import { SecurityService } from '../providers/security-service/security-service';
import { UserService } from '../providers/user-service/user-service';

export const routes: Routes = [
{
   path: 'landingpage',
   loadChildren: 'app/pages/landingPage/landingPage.module#landingModule'    
 },
{
   path: 'signout',    
   loadChildren: 'app/pages/landingPage/landingPage.module#landingModule',
   canActivate: [SignOutService],
},

{
   path: 'mobile',
   loadChildren: 'app/pages/mobileEnter/mobileEnter.module#mobileModule',
   canActivate: [SecurityService] 
},
{
   path: 'custid',
   loadChildren: 'app/pages/CustomerID/CustomerID.module#CustomerID',
   canActivate: [SecurityService] 
}
{ path: '', redirectTo: 'landingpage', pathMatch: 'full' },
{
  path: 'pages',
  component: Pages,
  children: [
    { path: 'home', loadChildren: 'app/pages/home/home.module#homeModule', canActivate: [UserService] },
    { path: 'accounts', loadChildren: 'app/pages/accountsPage/accountsPage.module#accountsModule', canActivate: [UserService] }

  ]
 },

 ];

 export const routing: ModuleWithProviders = RouterModule.forChild(routes);

canActiveMethod :

canActive(){
    if(this.securityService.isUserLoggedIn() && this.userData.getTokenData()){
        return true;
    }else{
        // this.router.navigate(["/landingpage"]);
        return false;
    }
}

Answer 1

1. 在canActive 方法中，我们应该将未经授权的路由导航到登录页面。

2.这个导航不会直接起作用，它应该被setTimeout包围。

canActive(){
    if(this.securityService.isUserLoggedIn() && this.userData.getTokenData()){
        return true;
    }else{
        setTimeout(()=> {
             this.router.navigate(["/landingpage"]);
        }, 150);
        return false;
    }
}