Как перенаправить пользователя на его целевой URL после входа с блокировкой auth0 - PullRequest
0 голосов
/ 25 июня 2019

Цель: если пользователь переходит на защищенную ссылку, ему необходимо дать всплывающее окно блокировки 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 становится неопределенным.

Как я могу решить эту проблему.

1 Ответ

0 голосов
/ 26 июня 2019

Вместо изменения вашего redirect_uri вы можете использовать URL без обратного вызова в соответствии с вашим вариантом использования. Это часто хранится следующими способами:

  • Для обычных веб-приложений используйте файл cookie или сеанс
  • Для одностраничного приложения используйте локальное хранилище в браузере
  • Для нативного приложения используйте память или локальное хранилище

С этого момента вы можете определить, как ваше приложение реагирует на перенаправление для желаемого маршрута. Это поддерживается в Lock. Я надеюсь, что это поможет вам в ваших поисках!

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

...