Angular TypeError:guard不是一个函数
我不知道我是否忽略了一些细节,或者我是否做错了什么,但我找不到导致错误的原因。我的目标是做一些事情,不断检查用户是否在每次访问页面内的路由时登录。。我使用角度5 App.module:Angular TypeError:guard不是一个函数,angular,typescript,Angular,Typescript,我不知道我是否忽略了一些细节,或者我是否做错了什么,但我找不到导致错误的原因。我的目标是做一些事情,不断检查用户是否在每次访问页面内的路由时登录。。我使用角度5 App.module: import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './pages/autenticacao/login.component';
import { AuthService } from './auth/auth.service';
import { RoutesInterceptor } from './auth/routes.interceptor';
import * as $ from 'jquery';
@NgModule({
declarations: [ AppComponent, LoginComponent ],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
],
bootstrap: [AppComponent],
providers: [ AuthService, RoutesInterceptor, ],
})
export class AppModule {
}
路由。交换机:
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class RoutesInterceptor implements CanActivate {
constructor(private auth: AuthService) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
return this.auth.isUserAuthenticated();
}
}
我的路线:
import { NgModule } from '@angular/core';
import { ExtraOptions, RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './pages/autenticacao/login.component';
import { RoutesInterceptor } from './auth/routes.interceptor';
const routes: Routes = [
{ path: 'pages', loadChildren: 'app/pages/pages.module#PagesModule', canActivate: [RoutesInterceptor] },
{ path: 'login', component: LoginComponent },
{ path: '', redirectTo: 'pages', pathMatch: 'full' },
{ path: '**', redirectTo: 'pages' },
];
const config: ExtraOptions = {
useHash: true,
};
@NgModule({
imports: [RouterModule.forRoot(routes, config)],
exports: [RouterModule],
})
export class AppRoutingModule {
}
在
批准模块中使用路由接收器
,而不是在应用模块中使用。因此,您应该在批准模块中将路由侦听器
列为提供者
尝试在页面模块的提供者
中添加路由侦听器
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class RoutesInterceptor implements CanActivate {
constructor(private auth: AuthService, private route: Router) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
if (this.auth.isUserAuthenticated()) {
return true;
}
this.route.navigate(['./login']);
return false;
}
}
如果您没有登录,我忘了重定向另一个可能导致此问题的问题是,如果您尝试使用CanActivate
保护作为另一种类型的保护,例如CanActivateChild
方法guard
在哪里?我不知道,从我看到的情况来看,这是有角度的。在路由器方法中,这不太可能是答案,因为如果这是真的,将导致注入器错误。但它可能会被添加为有用的注释。这很有帮助,但主要的一点是对代码进行了更改,谢谢。事实上,这就是我在使用模拟警卫进行测试时弄糟的地方。谢谢你的提示!