首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在使用auth0锁登录后将用户重定向到他们想要的url

如何在使用auth0锁登录后将用户重定向到他们想要的url
EN

Stack Overflow用户
提问于 2019-06-26 03:59:32
回答 2查看 450关注 0票数 0

目标:如果用户导航到一个受保护的链接,他们应该获得auth0锁弹出窗口来登录,并被重定向到他们想要的目的地。

我有一个受保护的路由/reports,它是通过authguard服务来保护的。

auth.guard.ts

代码语言:javascript
复制
@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

代码语言:javascript
复制
@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就变得未定义。

我该如何解决这个问题呢?

EN

回答 2

Stack Overflow用户

发布于 2019-06-26 05:04:21

您可以利用非回调redirect_uri来适应您的用例,而不是更改您的URL。它通常以以下方式存储:

  • 对于常规web应用程序,对单页面应用程序使用cookie或session
  • ,对本机应用程序使用浏览器
  • 中的本地存储,对

使用内存或本地存储

从这一点上,你可以构建你的应用程序如何响应你想要的路由的重定向。这在Lock中是支持的。我希望这对你的追求有所帮助!

https://auth0.com/docs/users/guides/redirect-users-after-login

票数 0
EN

Stack Overflow用户

发布于 2019-11-04 11:41:20

我最近使用WebAuth类在一个Angular应用程序中使用auth0-js库实现了自定义重定向。我遵循了Auth0文档中的建议:- https://auth0.com/docs/protocols/oauth2/redirect-users

下面是我使用的流程:

(在将用户发送到auth0锁定页面之前)

  1. 在localstorage
  2. invoke对象中生成随机数(随机字符串)
  3. 存储重定向路径,并使用随机数和字符串状态在localstorage
  4. invoke授权方法中将其字符串指定为
  5. Set nonce:WebAuth.authorize({ nonce, state }) (这是向用户发送auth0锁页的内容)

H114在处理用户登录时,将登录结果中的随机数与localstorage随机数匹配中的随机数进行比较,从登录结果中解析字符串状态,提取重定向路径,然后重定向用户H217 H118清除随机数

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56761208

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档