Lazy load modules on same path based on role
up vote
1
down vote
favorite
I am trying to load an Angular Module based on my role (when I am logged in). I tried it with an Angular Guard but that is not working, when it fails it does not go to the next route.
const routes: Routes = [
{
path: '',
loadChildren: () => AuthModule
// Load when not logged in
},
{
path: '',
loadChildren: () => AdminModule
// Load when admin
},
{
path: '',
loadChildren: () => CrewModule
// Load when crew
}
];
Any ideas for how to fix this? I think an Angular Guard or using a matcher is not the right solution for this...
Edit: For each path/module I have my own guard looking like the following:
import { Injectable } from '@angular/core';
import { CanLoad, CanActivate, Route, Router } from '@angular/router';
import { AuthService } from '@app/core';
@Injectable()
export class AdminModuleGuard implements CanLoad {
constructor(private authService: AuthService, private router: Router) {}
canLoad(route: Route): boolean {
const url: string = route.path;
console.log('Admin Module Load Guard - Url:' + url);
return false;
}
}
Thanks!
Kind regrands,
Yanick
angular routing lazy-loading
add a comment |
up vote
1
down vote
favorite
I am trying to load an Angular Module based on my role (when I am logged in). I tried it with an Angular Guard but that is not working, when it fails it does not go to the next route.
const routes: Routes = [
{
path: '',
loadChildren: () => AuthModule
// Load when not logged in
},
{
path: '',
loadChildren: () => AdminModule
// Load when admin
},
{
path: '',
loadChildren: () => CrewModule
// Load when crew
}
];
Any ideas for how to fix this? I think an Angular Guard or using a matcher is not the right solution for this...
Edit: For each path/module I have my own guard looking like the following:
import { Injectable } from '@angular/core';
import { CanLoad, CanActivate, Route, Router } from '@angular/router';
import { AuthService } from '@app/core';
@Injectable()
export class AdminModuleGuard implements CanLoad {
constructor(private authService: AuthService, private router: Router) {}
canLoad(route: Route): boolean {
const url: string = route.path;
console.log('Admin Module Load Guard - Url:' + url);
return false;
}
}
Thanks!
Kind regrands,
Yanick
angular routing lazy-loading
What exactly did you implement as the logic for your Guard? I think you can specify two different routes for both the modules and then navigate to a particular one based on the role of the user in the guard logic itself.
– SiddAjmera
Nov 19 at 16:15
1
Definitely Angular Guard is the solution for this, is exactly what it does: angular.io/guide/router#milestone-5-route-guards
– fmontes
Nov 19 at 16:23
@SiddAjmera Edited post with one of the guards
– Yanick van Barneveld
Nov 19 at 16:24
@fmontes But when the first guard fails, lets say 'AuthModule' is does not check if the next guard will pas or fail. Am I correct?
– Yanick van Barneveld
Nov 19 at 16:28
So in your case is like a it will check if user is login, then if its admin or crew, right? If that's the case, you can create a guard for admin and admin that can use a service that will check first if the user is login and then what role it have, there are several tutorials on this role based guards, but here is one: blogs.msdn.microsoft.com/premier_developer/2018/03/07/…
– fmontes
Nov 19 at 16:31
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I am trying to load an Angular Module based on my role (when I am logged in). I tried it with an Angular Guard but that is not working, when it fails it does not go to the next route.
const routes: Routes = [
{
path: '',
loadChildren: () => AuthModule
// Load when not logged in
},
{
path: '',
loadChildren: () => AdminModule
// Load when admin
},
{
path: '',
loadChildren: () => CrewModule
// Load when crew
}
];
Any ideas for how to fix this? I think an Angular Guard or using a matcher is not the right solution for this...
Edit: For each path/module I have my own guard looking like the following:
import { Injectable } from '@angular/core';
import { CanLoad, CanActivate, Route, Router } from '@angular/router';
import { AuthService } from '@app/core';
@Injectable()
export class AdminModuleGuard implements CanLoad {
constructor(private authService: AuthService, private router: Router) {}
canLoad(route: Route): boolean {
const url: string = route.path;
console.log('Admin Module Load Guard - Url:' + url);
return false;
}
}
Thanks!
Kind regrands,
Yanick
angular routing lazy-loading
I am trying to load an Angular Module based on my role (when I am logged in). I tried it with an Angular Guard but that is not working, when it fails it does not go to the next route.
const routes: Routes = [
{
path: '',
loadChildren: () => AuthModule
// Load when not logged in
},
{
path: '',
loadChildren: () => AdminModule
// Load when admin
},
{
path: '',
loadChildren: () => CrewModule
// Load when crew
}
];
Any ideas for how to fix this? I think an Angular Guard or using a matcher is not the right solution for this...
Edit: For each path/module I have my own guard looking like the following:
import { Injectable } from '@angular/core';
import { CanLoad, CanActivate, Route, Router } from '@angular/router';
import { AuthService } from '@app/core';
@Injectable()
export class AdminModuleGuard implements CanLoad {
constructor(private authService: AuthService, private router: Router) {}
canLoad(route: Route): boolean {
const url: string = route.path;
console.log('Admin Module Load Guard - Url:' + url);
return false;
}
}
Thanks!
Kind regrands,
Yanick
angular routing lazy-loading
angular routing lazy-loading
edited Nov 19 at 16:23
asked Nov 19 at 16:12
Yanick van Barneveld
114110
114110
What exactly did you implement as the logic for your Guard? I think you can specify two different routes for both the modules and then navigate to a particular one based on the role of the user in the guard logic itself.
– SiddAjmera
Nov 19 at 16:15
1
Definitely Angular Guard is the solution for this, is exactly what it does: angular.io/guide/router#milestone-5-route-guards
– fmontes
Nov 19 at 16:23
@SiddAjmera Edited post with one of the guards
– Yanick van Barneveld
Nov 19 at 16:24
@fmontes But when the first guard fails, lets say 'AuthModule' is does not check if the next guard will pas or fail. Am I correct?
– Yanick van Barneveld
Nov 19 at 16:28
So in your case is like a it will check if user is login, then if its admin or crew, right? If that's the case, you can create a guard for admin and admin that can use a service that will check first if the user is login and then what role it have, there are several tutorials on this role based guards, but here is one: blogs.msdn.microsoft.com/premier_developer/2018/03/07/…
– fmontes
Nov 19 at 16:31
add a comment |
What exactly did you implement as the logic for your Guard? I think you can specify two different routes for both the modules and then navigate to a particular one based on the role of the user in the guard logic itself.
– SiddAjmera
Nov 19 at 16:15
1
Definitely Angular Guard is the solution for this, is exactly what it does: angular.io/guide/router#milestone-5-route-guards
– fmontes
Nov 19 at 16:23
@SiddAjmera Edited post with one of the guards
– Yanick van Barneveld
Nov 19 at 16:24
@fmontes But when the first guard fails, lets say 'AuthModule' is does not check if the next guard will pas or fail. Am I correct?
– Yanick van Barneveld
Nov 19 at 16:28
So in your case is like a it will check if user is login, then if its admin or crew, right? If that's the case, you can create a guard for admin and admin that can use a service that will check first if the user is login and then what role it have, there are several tutorials on this role based guards, but here is one: blogs.msdn.microsoft.com/premier_developer/2018/03/07/…
– fmontes
Nov 19 at 16:31
What exactly did you implement as the logic for your Guard? I think you can specify two different routes for both the modules and then navigate to a particular one based on the role of the user in the guard logic itself.
– SiddAjmera
Nov 19 at 16:15
What exactly did you implement as the logic for your Guard? I think you can specify two different routes for both the modules and then navigate to a particular one based on the role of the user in the guard logic itself.
– SiddAjmera
Nov 19 at 16:15
1
1
Definitely Angular Guard is the solution for this, is exactly what it does: angular.io/guide/router#milestone-5-route-guards
– fmontes
Nov 19 at 16:23
Definitely Angular Guard is the solution for this, is exactly what it does: angular.io/guide/router#milestone-5-route-guards
– fmontes
Nov 19 at 16:23
@SiddAjmera Edited post with one of the guards
– Yanick van Barneveld
Nov 19 at 16:24
@SiddAjmera Edited post with one of the guards
– Yanick van Barneveld
Nov 19 at 16:24
@fmontes But when the first guard fails, lets say 'AuthModule' is does not check if the next guard will pas or fail. Am I correct?
– Yanick van Barneveld
Nov 19 at 16:28
@fmontes But when the first guard fails, lets say 'AuthModule' is does not check if the next guard will pas or fail. Am I correct?
– Yanick van Barneveld
Nov 19 at 16:28
So in your case is like a it will check if user is login, then if its admin or crew, right? If that's the case, you can create a guard for admin and admin that can use a service that will check first if the user is login and then what role it have, there are several tutorials on this role based guards, but here is one: blogs.msdn.microsoft.com/premier_developer/2018/03/07/…
– fmontes
Nov 19 at 16:31
So in your case is like a it will check if user is login, then if its admin or crew, right? If that's the case, you can create a guard for admin and admin that can use a service that will check first if the user is login and then what role it have, there are several tutorials on this role based guards, but here is one: blogs.msdn.microsoft.com/premier_developer/2018/03/07/…
– fmontes
Nov 19 at 16:31
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
Well, I was thinking more along the lines of this:
Have different routes defined for different types of user roles:
const routes: Routes = [
{ path: '/login', loadChildren: './auth/auth.module#AuthModule' },
{ path: '/admin', loadChildren: './admin/admin.module#AdminModule' },
{ path: '/crew', loadChildren: './crew/crew.module#CrewModule' }
];
And then in your Guard Logic:
import { Injectable } from '@angular/core';
import { CanLoad, CanActivate, Route, Router } from '@angular/router';
import { AuthService } from './authentication/services/auth.service';
@Injectable()
export class AuthGuardService implements CanLoad {
constructor(
private authService: AuthService,
private router: Router
) {}
canLoad(route: Route): boolean {
let url: string = route.path;
switch(url) {
case '/login': {
if(this.authService.isUserLoggedIn()) {
this.authService.userRole === 'ADMIN' ? this.router.navigate(['/admin']) : this.router.navigate(['/crew']);
return false;
} else {
return true;
}
break;
}
case '/admin': {
if(this.authService.isUserLoggedIn()) {
if(this.authService.userRole === 'ADMIN') {
this.router.navigate(['/admin']);
return true;
} else {
this.router.navigate(['/crew']);
return false;
}
} else {
this.router.navigate(['/login']);
return false;
}
break;
}
case '/crew': {
if(this.authService.isUserLoggedIn()) {
if(this.authService.userRole === 'ADMIN') {
this.router.navigate(['/admin']);
return false;
} else {
this.router.navigate(['/crew']);
return true;
}
} else {
this.router.navigate(['/login']);
return false;
}
break;
}
default: {
this.router.navigate(['/login']);
return false;
break;
}
}
}
}
Mhm I see, but I want to make the different roles on the same path, which is not possible with the canLoad or canActivate I guess. Any other ideas or am I doing something wrong?
– Yanick van Barneveld
Nov 20 at 8:00
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53378649%2flazy-load-modules-on-same-path-based-on-role%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
Well, I was thinking more along the lines of this:
Have different routes defined for different types of user roles:
const routes: Routes = [
{ path: '/login', loadChildren: './auth/auth.module#AuthModule' },
{ path: '/admin', loadChildren: './admin/admin.module#AdminModule' },
{ path: '/crew', loadChildren: './crew/crew.module#CrewModule' }
];
And then in your Guard Logic:
import { Injectable } from '@angular/core';
import { CanLoad, CanActivate, Route, Router } from '@angular/router';
import { AuthService } from './authentication/services/auth.service';
@Injectable()
export class AuthGuardService implements CanLoad {
constructor(
private authService: AuthService,
private router: Router
) {}
canLoad(route: Route): boolean {
let url: string = route.path;
switch(url) {
case '/login': {
if(this.authService.isUserLoggedIn()) {
this.authService.userRole === 'ADMIN' ? this.router.navigate(['/admin']) : this.router.navigate(['/crew']);
return false;
} else {
return true;
}
break;
}
case '/admin': {
if(this.authService.isUserLoggedIn()) {
if(this.authService.userRole === 'ADMIN') {
this.router.navigate(['/admin']);
return true;
} else {
this.router.navigate(['/crew']);
return false;
}
} else {
this.router.navigate(['/login']);
return false;
}
break;
}
case '/crew': {
if(this.authService.isUserLoggedIn()) {
if(this.authService.userRole === 'ADMIN') {
this.router.navigate(['/admin']);
return false;
} else {
this.router.navigate(['/crew']);
return true;
}
} else {
this.router.navigate(['/login']);
return false;
}
break;
}
default: {
this.router.navigate(['/login']);
return false;
break;
}
}
}
}
Mhm I see, but I want to make the different roles on the same path, which is not possible with the canLoad or canActivate I guess. Any other ideas or am I doing something wrong?
– Yanick van Barneveld
Nov 20 at 8:00
add a comment |
up vote
0
down vote
Well, I was thinking more along the lines of this:
Have different routes defined for different types of user roles:
const routes: Routes = [
{ path: '/login', loadChildren: './auth/auth.module#AuthModule' },
{ path: '/admin', loadChildren: './admin/admin.module#AdminModule' },
{ path: '/crew', loadChildren: './crew/crew.module#CrewModule' }
];
And then in your Guard Logic:
import { Injectable } from '@angular/core';
import { CanLoad, CanActivate, Route, Router } from '@angular/router';
import { AuthService } from './authentication/services/auth.service';
@Injectable()
export class AuthGuardService implements CanLoad {
constructor(
private authService: AuthService,
private router: Router
) {}
canLoad(route: Route): boolean {
let url: string = route.path;
switch(url) {
case '/login': {
if(this.authService.isUserLoggedIn()) {
this.authService.userRole === 'ADMIN' ? this.router.navigate(['/admin']) : this.router.navigate(['/crew']);
return false;
} else {
return true;
}
break;
}
case '/admin': {
if(this.authService.isUserLoggedIn()) {
if(this.authService.userRole === 'ADMIN') {
this.router.navigate(['/admin']);
return true;
} else {
this.router.navigate(['/crew']);
return false;
}
} else {
this.router.navigate(['/login']);
return false;
}
break;
}
case '/crew': {
if(this.authService.isUserLoggedIn()) {
if(this.authService.userRole === 'ADMIN') {
this.router.navigate(['/admin']);
return false;
} else {
this.router.navigate(['/crew']);
return true;
}
} else {
this.router.navigate(['/login']);
return false;
}
break;
}
default: {
this.router.navigate(['/login']);
return false;
break;
}
}
}
}
Mhm I see, but I want to make the different roles on the same path, which is not possible with the canLoad or canActivate I guess. Any other ideas or am I doing something wrong?
– Yanick van Barneveld
Nov 20 at 8:00
add a comment |
up vote
0
down vote
up vote
0
down vote
Well, I was thinking more along the lines of this:
Have different routes defined for different types of user roles:
const routes: Routes = [
{ path: '/login', loadChildren: './auth/auth.module#AuthModule' },
{ path: '/admin', loadChildren: './admin/admin.module#AdminModule' },
{ path: '/crew', loadChildren: './crew/crew.module#CrewModule' }
];
And then in your Guard Logic:
import { Injectable } from '@angular/core';
import { CanLoad, CanActivate, Route, Router } from '@angular/router';
import { AuthService } from './authentication/services/auth.service';
@Injectable()
export class AuthGuardService implements CanLoad {
constructor(
private authService: AuthService,
private router: Router
) {}
canLoad(route: Route): boolean {
let url: string = route.path;
switch(url) {
case '/login': {
if(this.authService.isUserLoggedIn()) {
this.authService.userRole === 'ADMIN' ? this.router.navigate(['/admin']) : this.router.navigate(['/crew']);
return false;
} else {
return true;
}
break;
}
case '/admin': {
if(this.authService.isUserLoggedIn()) {
if(this.authService.userRole === 'ADMIN') {
this.router.navigate(['/admin']);
return true;
} else {
this.router.navigate(['/crew']);
return false;
}
} else {
this.router.navigate(['/login']);
return false;
}
break;
}
case '/crew': {
if(this.authService.isUserLoggedIn()) {
if(this.authService.userRole === 'ADMIN') {
this.router.navigate(['/admin']);
return false;
} else {
this.router.navigate(['/crew']);
return true;
}
} else {
this.router.navigate(['/login']);
return false;
}
break;
}
default: {
this.router.navigate(['/login']);
return false;
break;
}
}
}
}
Well, I was thinking more along the lines of this:
Have different routes defined for different types of user roles:
const routes: Routes = [
{ path: '/login', loadChildren: './auth/auth.module#AuthModule' },
{ path: '/admin', loadChildren: './admin/admin.module#AdminModule' },
{ path: '/crew', loadChildren: './crew/crew.module#CrewModule' }
];
And then in your Guard Logic:
import { Injectable } from '@angular/core';
import { CanLoad, CanActivate, Route, Router } from '@angular/router';
import { AuthService } from './authentication/services/auth.service';
@Injectable()
export class AuthGuardService implements CanLoad {
constructor(
private authService: AuthService,
private router: Router
) {}
canLoad(route: Route): boolean {
let url: string = route.path;
switch(url) {
case '/login': {
if(this.authService.isUserLoggedIn()) {
this.authService.userRole === 'ADMIN' ? this.router.navigate(['/admin']) : this.router.navigate(['/crew']);
return false;
} else {
return true;
}
break;
}
case '/admin': {
if(this.authService.isUserLoggedIn()) {
if(this.authService.userRole === 'ADMIN') {
this.router.navigate(['/admin']);
return true;
} else {
this.router.navigate(['/crew']);
return false;
}
} else {
this.router.navigate(['/login']);
return false;
}
break;
}
case '/crew': {
if(this.authService.isUserLoggedIn()) {
if(this.authService.userRole === 'ADMIN') {
this.router.navigate(['/admin']);
return false;
} else {
this.router.navigate(['/crew']);
return true;
}
} else {
this.router.navigate(['/login']);
return false;
}
break;
}
default: {
this.router.navigate(['/login']);
return false;
break;
}
}
}
}
answered Nov 19 at 16:40
SiddAjmera
12.1k21137
12.1k21137
Mhm I see, but I want to make the different roles on the same path, which is not possible with the canLoad or canActivate I guess. Any other ideas or am I doing something wrong?
– Yanick van Barneveld
Nov 20 at 8:00
add a comment |
Mhm I see, but I want to make the different roles on the same path, which is not possible with the canLoad or canActivate I guess. Any other ideas or am I doing something wrong?
– Yanick van Barneveld
Nov 20 at 8:00
Mhm I see, but I want to make the different roles on the same path, which is not possible with the canLoad or canActivate I guess. Any other ideas or am I doing something wrong?
– Yanick van Barneveld
Nov 20 at 8:00
Mhm I see, but I want to make the different roles on the same path, which is not possible with the canLoad or canActivate I guess. Any other ideas or am I doing something wrong?
– Yanick van Barneveld
Nov 20 at 8:00
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53378649%2flazy-load-modules-on-same-path-based-on-role%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What exactly did you implement as the logic for your Guard? I think you can specify two different routes for both the modules and then navigate to a particular one based on the role of the user in the guard logic itself.
– SiddAjmera
Nov 19 at 16:15
1
Definitely Angular Guard is the solution for this, is exactly what it does: angular.io/guide/router#milestone-5-route-guards
– fmontes
Nov 19 at 16:23
@SiddAjmera Edited post with one of the guards
– Yanick van Barneveld
Nov 19 at 16:24
@fmontes But when the first guard fails, lets say 'AuthModule' is does not check if the next guard will pas or fail. Am I correct?
– Yanick van Barneveld
Nov 19 at 16:28
So in your case is like a it will check if user is login, then if its admin or crew, right? If that's the case, you can create a guard for admin and admin that can use a service that will check first if the user is login and then what role it have, there are several tutorials on this role based guards, but here is one: blogs.msdn.microsoft.com/premier_developer/2018/03/07/…
– fmontes
Nov 19 at 16:31