错误：未捕获（在承诺中）：ReferenceError：未定义localStorage

Question

我正在使用Angular / Typescript编写单页面应用程序。应用程序以登录页面开始。用户通过身份验证后，使用以下代码行加载新页面：

this.router.navigate(['/productionFiles']);

这很好！另外两个路由器路径用canactivate [ AuthGuard ]装饰

当应用程序将用户路由到生产文件页面时，此canactivate可以正常工作。但是同一页面上的刷新会出现以下错误：

Exception: Call to Node module failed with error: Error: Uncaught (in promise): Error: No provider for AuthGuard!

此外，当我手动输入URL相同的错误引发？

我知道这个错误还有很多问题。但我认为这有点不同。所以它似乎正在工作，除非有浏览器刷新或手动输入的URL。

在身份验证服务中，正在设置localstorage（'currentuser'）：

localStorage.setItem('currentUser', JSON.stringify(user));

由于我使用Visual Studio的SPA模板，有3个app.module文件：

App.Module.Shared.Ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes  } from '@angular/router';

import { AppComponent } from './components/app/app.component';
import { HomeComponent } from './components/home/home.component';
import { HeaderComponent } from './components/Header/header.component';
import { ProductionfileComponent } from     './components/ProductionFile/productionfile.component';
import { ProductionFileSummary } from './components/ProductionFile/productionfilesummary.component';
import { ProductionFileDetailComponent } from './components/ProductionFile/productionfiledetail.component';
import { LoginComponent } from './components/Login/login.component';
import { AuthGuard } from './components/Login/auth.guard';

export const sharedConfig: NgModule = {

declarations: [
        AppComponent,
        HomeComponent,
        HeaderComponent,
        ProductionfileComponent,
        ProductionFileSummary,
        ProductionFileDetailComponent,
        LoginComponent
    ],
    imports: [
        RouterModule.forRoot([
            { path: '', redirectTo: 'login', pathMatch: 'full' },
            { path: 'login', component: LoginComponent },
            { path: 'productionFiles', component: ProductionfileComponent,     canActivate: [ AuthGuard ] },
            { path: 'productionfiledetail/:prodHeaderOrdNr', component:     ProductionFileDetailComponent, canActivate:  [ AuthGuard ] },
            { path: '**', redirectTo: 'login' }
        ]),
        BrowserModule,
        FormsModule
    ],
    providers: [AuthGuard],
    bootstrap: [AppComponent]
};

App.Module.Client.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { sharedConfig } from './app.module.shared';

@NgModule({    
    declarations: sharedConfig.declarations,
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        ...sharedConfig.imports
    ],
    providers: [ sharedConfig.providers,
        { provide: 'ORIGIN_URL', useValue: location.origin }
    ],
    bootstrap: [sharedConfig.bootstrap]
})
export class AppModule {
}

App.Module.Server.ts：

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { sharedConfig } from './app.module.shared';

@NgModule({

    declarations: sharedConfig.declarations,
    imports: [
        ServerModule,
        ...sharedConfig.imports
    ],
    providers: sharedConfig.providers,
    bootstrap: sharedConfig.bootstrap
})
export class AppModule {
}

有人可以把我放在正确的轨道上吗？

Answer 1

我发现，在浏览器刷新后，localstorage不可用/定义。所以我改变了Auth.Guard.Ts代码。不要，如果它是正确的，但它的工作知道我期望的方式。

import { Injectable } from '@angular/core';
import { Router, ActivatedRoute, CanActivate } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private router: Router,
                private actvRoute: ActivatedRoute) { }

    canActivate() {
        console.log('AuthGuard.CanActivate')
        //return true;

        try {
            if (localStorage.getItem('currentUser')) {
                // logged in so return true
                return true;
            }

            // not logged in so redirect to login page
            this.router.navigate(['/login']);
            return false;

        } catch (e) {

        }
    }
}

Answer 2

我认为正确的方法是使用isPlatformBrowser来识别您是在执行代码客户端还是服务器端

import { isPlatformBrowser } from '@angular/common';
import { PLATFORM_ID } from '@angular/core';

constructor(private router: Router,
            private actvRoute: ActivatedRoute, @Inject(PLATFORM_ID) platformId: Object) { }

canActivate() {
    console.log('AuthGuard.CanActivate')
    //return true;

    if(isPlatformBrowser(this.platformId))//<== means you are client side
    {
        if (localStorage.getItem('currentUser')) {
            // logged in so return true
            return true;
        }

        // not logged in so redirect to login page
        this.router.navigate(['/login']);
        return false;
    }
    else
    {
       //server side
    }

}