目标:如果用户导航到一个受保护的链接,他们应该获得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并将其添加到变量中,然后显示锁。在此服务中,im侦听已验证的事件,设置会话,然后重定向到设置的这个重定向url。
但是,auth0已经有了自己的redirectUrl,该url当前指向基本url /
。一旦它到达那里,状态this.redirectUrl就变得未定义。
我该如何解决这个问题呢?
发布于 2019-06-26 05:04:21
您可以利用非回调redirect_uri来适应您的用例,而不是更改您的URL。它通常以以下方式存储:
使用内存或本地存储
从这一点上,你可以构建你的应用程序如何响应你想要的路由的重定向。这在Lock中是支持的。我希望这对你的追求有所帮助!
https://auth0.com/docs/users/guides/redirect-users-after-login
发布于 2019-11-04 11:41:20
我最近使用WebAuth
类在一个Angular应用程序中使用auth0-js
库实现了自定义重定向。我遵循了Auth0文档中的建议:- https://auth0.com/docs/protocols/oauth2/redirect-users
下面是我使用的流程:
(在将用户发送到auth0锁定页面之前)
WebAuth.authorize({ nonce, state })
(这是向用户发送auth0锁页的内容)H114在处理用户登录时,将登录结果中的随机数与localstorage随机数匹配中的随机数进行比较,从登录结果中解析字符串状态,提取重定向路径,然后重定向用户H217 H118清除随机数
https://stackoverflow.com/questions/56761208
复制相似问题