I encountered an issue with the redirectTo not redirecting to a link with canActivate when I logged in.
The redirectTo functions correctly when I log out, redirecting to my /login component and then to /index after logging in.
However, it remains stuck on '' when I am logged in.
I added console.log to my authGuard, and noticed that the redirect URL "/index" does enter that function during the 'stuck' situation without causing any crashes in the development tool.
Interestingly, after commenting out the canActivate, the redirectTo resumes functioning properly as before.
For reference, my authGuard with canActivate works fine in other situations excluding the use of redirectTo.
Below is my app-routing.module.ts:
/* import... */
const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: '', redirectTo : '/index', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];
/* ngmodel and export ... */
and here's my index-routing.module.ts:
/* import ... */
const indexRoutes: Routes = [
{
path: 'index',
component: IndexComponent,
canActivate: [AuthGuard], //<- if comment this will work
},
];
/* ngmodel and export ... */
Here's my auth-guard.module.ts:
/* import ... */
@Injectable()
export class AuthGuard implements CanActivate {
constructor(
private authService: AuthService,
private router: Router
) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
let url: string = state.url;
//redirectTo did get in here
console.log(url);
return this.checkLogin(url);
}
checkLogin(url: string): boolean {
if (this.authService.login_data && (this.authService.login_data.userprofile || !this.authService.login_data.need_login)) {
return true;
}
this.authService.get_login_data()
.subscribe(
data => {
this.authService.login_data = data;
if (data.userprofile || !data.need_login) {
return true;
}
this.authService.redirectUrl = url;
this.router.navigate(['/login']);
return false;
},
error => { this.authService.errMsg = <any>error;}
);
}
}
Recently, I updated my project to Angular 4.0.1. Thank you for your assistance.
UPDATE:I have modified my guard return from boolean to Observable but unfortunately, the issue persists. Here is the updated code snippet:
checkLogin(url: string): Observable<boolean> {
if (this.authService.login_data && (this.authService.login_data.userprofile || !this.authService.login_data.need_login)) {
console.log('gonna return observable true');
return Observable.of(true);
}
this.authService.get_login_data()
.subscribe(
data => {
this.authService.login_data = data;
if (data.userprofile || !data.need_login) {
return Observable.of(true);
}
this.authService.redirectUrl = url;
this.router.navigate(['/login']);
return Observable.of(false);
},
error => { this.authService.errMsg = <any>error;}
);
}
In the console, I receive "in subscribe and gonna return observable true". Any insights would be appreciated.
UPDATE:Upon exploring the issue further, I came across a post mentioning that canActivate may not wait for the subscription to complete. This could be causing the problem at hand.