У меня есть два ленивых загрузочных модуля (site и gtd), каждый из которых содержит несколько маршрутов.Я хочу, чтобы все дочерние маршруты в компоненте gtd (пути с 'app / *') были защищены AuthGuard.Я использую Auth0 для аутентификации.
Но по какой-то причине после аутентификации я пытаюсь позвонить this.router.navigate('/app'), и он всегда разрешается до false.Я пробовал оба с и без AuthGuard, и это приводит к тому же поведению.Так что я не думаю, что это проблема охраны маршрута.Но на всякий случай, я включил его здесь.
Нет сообщений об ошибках или чего-либо в этом роде.
Почему он не может маршрутизировать?
Вот мои маршруты:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuardService as AuthGuard } from './core/auth/auth-guard.service';
const routes: Routes = [
{ path: '', redirectTo: 'site', pathMatch: 'full' },
{ path: 'site', loadChildren: './site/site.module#SiteModule' },
{ path: 'app', loadChildren: './gtd/gtd.module#GtdModule', canActivate: [AuthGuard]},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Вот AuthGuard:
import { Injectable } from '@angular/core';
import { AuthService } from './auth.service';
import { Router, CanActivate } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class AuthGuardService implements CanActivate {
constructor(public auth: AuthService, public router: Router) { }
canActivate(): boolean {
if (!this.auth.isAuthenticated()) {
console.log('Not authenticated')
this.router.navigate(['']);
return false;
}
console.log('Authentication guard satisfied.')
return true;
}
}
Вот служба аутентификации:
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import * as auth0 from 'auth0-js';
import { LogService } from '../util/log.service';
import { Location } from '@angular/common';
import { environment } from '../../environments/environment';
@Injectable({
providedIn: 'root'
})
export class AuthService {
private loginRedirect = environment.auth0.loginRedirectUrl;
private logoutRedirectTo = environment.auth0.logoutRedirectTo;
private clientID = environment.auth0.clientID;
private domain = environment.auth0.domain;
private _idToken: string;
private _accessToken: string;
private _expiresAt: number;
userProfile: any;
auth0 = new auth0.WebAuth({
clientID: this.clientID,
domain: this.domain,
responseType: 'token id_token',
redirectUri: this.loginRedirect,
scope: 'openid'
});
constructor(public router: Router, public logger: LogService, public location: Location) {
this._idToken = '';
this._accessToken = '';
this._expiresAt = 0;
}
get accessToken(): string {
return this.accessToken;
}
get idToken(): string {
return this._idToken;
}
public getProfile(cb): void {
if (!this._accessToken) {
const errMsg = 'Access Token must exist to fetch profile';
this.logger.error(errMsg);
throw new Error(errMsg);
}
const self = this;
this.auth0.client.userInfo(this._accessToken, (err, profile) => {
if (profile) {
self.userProfile = profile;
}
cb(err, profile);
});
}
login(): void {
this.auth0.authorize();
}
public handleAuthentication(): void {
this.auth0.parseHash((err, authResult) => {
if (authResult && authResult.accessToken && authResult.idToken) {
window.location.hash = '';
this.localLogin(authResult);
this.logger.log('Authentication Result:', authResult);
this.router.navigate(['/app']);
} else if (err) {
this.router.navigate(['/home']);
console.log(err);
}
});
}
private localLogin(authResult): void {
// Set isLoggedIn flag in localStorage
localStorage.setItem('isLoggedIn', 'true');
// Set the time that the access token will expire at
const expiresAt = (authResult.expiresAt * 1000) + new Date().getTime();
this._accessToken = authResult.accessToken;
this._idToken = authResult.idToken;
this._expiresAt = expiresAt;
}
public renewTokens(): void {
this.auth0.checkSession({}, (err, authResult) => {
if (authResult && authResult.accessToken && authResult.idToken) {
this.localLogin(authResult);
} else if (err) {
alert (`Could not get a new token (${err.error}: ${err.error_description}).`);
this.logout();
}
});
}
public logout(): void {
// Remove tokens and expiry time
this._accessToken = '';
this._idToken = '';
this._expiresAt = 0;
// Remove isLoggedIn flag from localStorage
localStorage.removeItem('isLoggedIn');
// Go back to the home route
window.location.href = `http://${this.domain}/logout?returnTo=${this.logoutRedirectTo}`;
this.router.navigate(['/']);
this.logger.info('Access token', this._accessToken);
this.logger.info('IdToken', this._idToken);
}
public isAuthenticated(): boolean {
// Check whether the current time is past the access token's expiry time
return new Date().getTime() < this._expiresAt;
}
}
Явызов handleAuthentication в компоненте, загруженном в URL обратного вызова для входа в систему: import {Component, OnInit} из '@ angular / core';import {AuthService} из 'src / app / core / auth / auth.service';
@Component({
selector: 'app-login-callback',
templateUrl: './login-callback.component.html',
styleUrls: ['./login-callback.component.scss']
})
export class LoginCallbackComponent implements OnInit {
constructor(private authService: AuthService) { }
ngOnInit() {
console.log(this.authService.isAuthenticated())
this.authService.handleAuthentication();
}
}
Я не могу понять, почему, но this.router.navigate() разрешается в false.