Цель: если пользователь переходит на защищенную ссылку, ему необходимо дать всплывающее окно блокировки auth0 для входа в систему и перенаправить к его предполагаемому месту назначения.
У меня есть защищенный маршрут /reports
, который защищен через службу authguard.
auth.guard.ts
@Injectable()
export class AuthGuard implements CanActivate {
constructor(
private authService: AuthService,
private router: Router,
private snackBar: MatSnackBar,
) {
}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
if (!this.authService.isAuthenticated()) {
this.authService.login(state.url);
return false;
}
return true;
}
}
Охранник пытается войти в систему с помощью state.url (куда пользователь собирался пойти, прежде чем его попросят войти).
auth.service.ts
@Injectable()
export class AuthService {
lock = new Auth0Lock(
environment.auth.clientID,
environment.auth.domain,
environment.auth.auth0Options,
);
jwtHelper: any;
// Store authentication data
// userProfile: any;
// accessToken: string;
// authenticated: boolean;
redirectUrl: any;
constructor(private router: Router, private jwtService: JwtService) {
this.jwtHelper = new JwtHelperService();
this.lock.on('authenticated', (authResult: any) => {
if (authResult && authResult.accessToken && authResult.idToken) {
this.setSession(authResult);
console.log('NAVIGATING TO ANOTHER PAGE');
this.router.navigate([this.redirectUrl]);
}
});
this.lock.on('authorization_error', error => {
console.log('Auth Failed', error);
});
}
private setSession(authResult): void {
console.log('setting session');
console.log('here', this.redirectUrl);
this.lock.getUserInfo(authResult.accessToken, (error, profile) => {
if (error) {
throw new Error(error);
}
this.setProfileToken(authResult.idToken);
localStorage.setItem('token', authResult.idToken);
localStorage.setItem('profile', JSON.stringify(profile));
});
}
getLoggedInUser() {
const user = localStorage.getItem('profile');
return JSON.parse(user);
}
setProfileToken(idToken): void {
this.jwtService.generate(idToken).subscribe((res) => {
if (res) {
localStorage.setItem('profile_token', res.token);
}
}, (err) => {
console.log(err);
});
}
login(redirectUrl: string = '/') {
this.redirectUrl = redirectUrl;
console.log('login', this.redirectUrl);
this.lock.show();
}
logout() {
localStorage.removeItem('profile');
localStorage.removeItem('token');
localStorage.removeItem('profile_token');
this.router.navigate(['/']);
}
isAuthenticated() {
const token = localStorage.getItem('token');
return !this.jwtHelper.isTokenExpired(token);
}
}
Служба аутентификации берет файл state.url и добавляет его в переменную, а затем показывает блокировку. В рамках этой службы я прослушиваю аутентифицированное событие, устанавливаю сеанс и затем перенаправляю на этот URL-адрес перенаправления, который был установлен.
Однако auth0 уже имеет свой собственный redirectUrl, который в данный момент указывает на базовый URL /
. Как только это происходит, состояние this.redirectUrl становится неопределенным.
Как я могу решить эту проблему.