In meiner Angular-App gibt es 3 Arten von Benutzern: Administrator, Brauer (Anbieter) und Endbenutzer. Ich möchte Brauer daran hindern, auf Admin-Routen zuzugreifen, genauso wie Endbenutzer daran gehindert werden sollten, auf Admin-Routen und Vendor-Routen zuzugreifen.
Wie ich dies durch eckiges Routing erreichen kann.
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{
path: 'home', component: HomeContentComponent,
},
{ path: 'auth', loadChildren: './modules/auth/auth.module#AuthModule' },
{
path: 'admin',
loadChildren: './modules/admin/admin.module#AdminModule',
canActivate: [AuthGuard],
},
{
path: 'vendor',
loadChildren: './modules/vendor/vendor.module#VendoreModule',
canActivate: [AuthGuard],
},
{
path: 'user',
loadChildren: './modules/user/user.module#UserModule',
canActivate: [AuthGuard],
}
]
Auth Guard:
import { Injectable } from "@angular/core";
import {
CanActivate,
ActivatedRouteSnapshot,
RouterStateSnapshot,
Router,
CanDeactivate,
} from "@angular/router";
import { Observable } from "rxjs";
import { AuthService } from "../services/firebase/auth.service";
@Injectable({ providedIn: "root" })
export class AuthGuard implements CanActivate {
constructor(public authService: AuthService, public router: Router) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean {
// Guard for userRole is login or not
// var Role=localStorage.getItem('role')
let user = localStorage.getItem('toke');
if (!user) {
this.router.navigate(["/auth/login"]);
return true;
}
return true;
}
}
Ich habe auth guard wie folgt, wie ich es ändern kann, um die gewünschte Funktionalität zu erreichen.
Es wäre sehr dankbar, wenn jemand helfen könnte.
Ich habe dies erreicht, indem ich Logik verwendet habe ,
Sie können Logik wie in Ihrer app.component.ts verwenden
import { Router, NavigationEnd } from '@angular/router';
export class AppComponent implements OnInit {
constructor(
private router: Router,
) {
this.router.events.subscribe((ev) => {
if (ev instanceof NavigationEnd) {
const user = localStorage.getItem("Id");
const Role = localStorage.getItem('UserRole')
if (user && Role && Role === 'User' && ev.url.includes('/admin)) {
this.router.navigate(['user/home']);
}
}
}
In ähnlicher Weise können Sie für alle Ihre Rollen if-Bedingungen definieren und auf ihrer Hauptroute umleiten, wenn Benutzer dann die Standardseite des Benutzers, wenn Super-Admin, dann könnte es Admin/Dashboard oder so etwas sein.
Zweiter Weg:
Eine andere Möglichkeit, dies zu erreichen, ist die Verwendung von ngx-Berechtigungen , mit denen Sie Ihre Route rollenbasiert steuern können.
Stackblitz - Demo zur weiteren Verdeutlichung anhängen .
Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen