Question

我在尝试将我的可注入服务导入组件时遇到问题。尽我所能我无法让系统看到AuthenticationCallbackActivateGuard。

我正在使用Steve Sanderson's ASP.Net Core based Angular 2 template的修改版本。它在app.module中输入完全正常，但是当我尝试在我的登录组件上完成它时，它再也找不到它了。

app.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';
import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { LoginComponent } from './components/login/login.component';
import { AuthenticationCallbackActivateGuard } from './components/login/authenticationcallbackactivateguard';


@NgModule({
    bootstrap: [AppComponent, AuthenticationCallbackActivateGuard ],
    declarations: [

        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        AuthenticationCallbackActivateGuard,
        LoginComponent,
        HomeComponent
    ],
    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        RouterModule.forRoot([
            { path: '', component: HomeComponent, canActivate: [AuthenticationCallbackActivateGuard] },
            { path: 'home', component: HomeComponent },
            { path: '#', component: LoginComponent},
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: 'login', component: LoginComponent },
            { path: 'signin-auth0', component:HomeComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModule {
}

login.component.ts

import { Component } from '@angular/core';
import { tokenNotExpired, JwtHelper } from 'angular2-jwt';
import { AuthCallback } from './components/login/authenticationcallbackactivateguard'; //<-- Error is here

let Auth0Lock = require('auth0-lock').default;


let options = {
    auth: {
        redirect: true,
        rememberLastLogin: true
    },
    languageDictionary: {
        title: "Login"
    },
 theme: {
     logo: 'http://www.sapientsoft.co.za/img/sapient-logo.png',
     primaryColor: '#2E5EAC',

  } 
};  


@Component({
    selector: 'login',
    template: require('./login.component.html'),
    providers: []
})  
//providers: [Auth]
export class LoginComponent {

    constructor(authCallback: AuthCallback)
    {

    }

    lock = new Auth0Lock('WnB39V8Rwss366sATm01HbVcWijm96Vd', 'sapientfranko.eu.auth0.com',options);
    jwtHelper : JwtHelper = new JwtHelper();


    login()
    {


        this.lock.show("authenticated", (authResult) => {
            localStorage.setItem('profile', JSON.stringify(authResult.profile));
            localStorage.setItem('id_token', authResult.idToken);

            console.log(
                this.jwtHelper.decodeToken(authResult.id_token),
                this.jwtHelper.getTokenExpirationDate(authResult.id_token),
                this.jwtHelper.isTokenExpired(authResult.id_token)
            );
            this.loggedIn();  

        });


    }

    logOut()
    {
        localStorage.removeItem('profile');
        localStorage.removeItem('id_token');

        this.loggedIn();
    }


    loggedIn()
    {
        return tokenNotExpired();
    }

}

AuthenticationCallbackActivateGuard.ts

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { Location } from '@angular/common';

@Injectable()
export class AuthenticationCallbackActivateGuard implements CanActivate {

    constructor(private location: Location) { }

    canActivate() {
        // You may want to make a more robust check here
        return this.location.path(true).indexOf("access_token") === -1;
    }
}

我的文件夹结构

Folder Structure

Answer 1

根据我的理解，你不应该引导你的警卫。您实际上是在ngModule中将它添加到您的提供者，这样整个应用程序中都可以使用警卫和其他服务提供者。

providers: [AuthenticationCallbackActivateGuard]

..如果你这样做，你不需要添加任何组件。如果要在登录组件中实现它，只需将其添加到路由模块中，就像在路由中将其标记在主组件中一样

{ path: 'login', component: LoginComponent, canActivate[AuthenticationCallbackActivateGuard] },

关于您的错误，原因很简单，您尝试使用错误的名称导入它，在尝试导入它的登录组件中，如：

import { AuthCallback } from './components/login/authenticationcallbackactivateguard'; //<-- Error is here

即使组件的名称似乎是：AuthenticationCallbackActivateGuard

如果您不想在模块中添加提供程序，您也可以在每个组件中添加提供程序，但我发现在模块中声明它更好更容易，因此您无需确保您将它导入到您需要的每个组件中：）

找不到模块'./components/login/authenticationcallbackactivateguard'

1 个答案: