0

I am implementing a canActivate Guard that has a logic to redirect to the login site if the user is not logged in. So far, all the examples and fixes I've come across are dealing with a login page defined in Angular itself. In my case, login is on a separate subdomain.

The redirect is working as expected but because of the external redirect, restricted page displays in the browser and then the redirect starts.

I've tried both window.open and document through @inject.

Using Angular 5.2.5

This is my auth.guard.ts:

import { Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/common';

import { Router, CanActivate, CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { CookieService } from 'ngx-cookie-service';
import { AlmVars } from '@alm/ngwebpack-vars/alm-vars.const';


@Injectable()

export class AuthGuard implements CanActivate, CanActivateChild {
    readonly almVars = AlmVars;

    constructor(private router: Router, private cookieService: CookieService, @Inject(DOCUMENT) private document: any) {

    }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        if (this.cookieService.get('almVToken')) {
            return true;
        }

        // this.document.location.href = '//login.' + this.almVars.hostname + '?referer=' + this.almVars.app;
        window.open('//login.' + this.almVars.hostname + '?referer=' + this.almVars.app, '_self');

        return false;
    }
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppResolver } from './app.resolver';
import {AuthGuard} from './shared/alm-auth.guard';
import {ProfileComponent} from './profile/profile.component';


const appRoutes: Routes = [{
    path: '',
    component: ProfileComponent,
    canActivate: [
        AuthGuard
    ],
}];

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes),
    ],
    exports: [
        RouterModule,
    ],
    providers: [
        AppResolver,
    ]
})

export class AppRoutingModule {

}
wazZzif
  • 65
  • 4
  • I'm coming from a AngularJs and UI-Router background and this work is meant to replace that existing site. In that setup, I have a redirect on $stateChangeStart at 'run' time and a simple window.location.href is doing the job without defining a intermediary blank page. My understanding of CanActivate is on the same lines. Would you agree? – wazZzif Mar 16 '18 at 23:46
  • So you're returning `false` from `canActivate` and opening the popup, but `ProfileComponent` is being displayed anyway? – Jason Goemaat Mar 16 '18 at 23:58
  • Yes. But not popup, the redirect kicks in after the view shows up. – wazZzif Mar 17 '18 at 00:01
  • Where's the redirect? And by view you mean ProfileComponent? – Jason Goemaat Mar 17 '18 at 00:17
  • Site: members.blah.com. Login: login.blah.com. Yes, the template of ProfileComponent – wazZzif Mar 17 '18 at 00:23

0 Answers0