0

我正在使用 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 {
}

有人可以让我走上正轨吗？

4

2 回答 2

0

我认为正确的方法是使用 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
    }

}
于 2018-03-01T09:05:20.147 回答
0

我发现，浏览器刷新后本地存储不可用/定义。所以我更改了 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) {

        }
    }
}
于 2018-03-01T08:55:34.180 回答