Маршрутизация на основе ролей Angular 6 по корневому URL

Я пытаюсь реализовать маршрутизацию на основе ролей для моего корневого URL. Например, когда пользователь вошел в систему, я могу перенаправить его на страницу панели управления пользователя с login.component. То же самое применимо к администратору, также перенаправление на страницу панели управления администратора через логин. Но как перенаправить на конкретную панель управления с помощью роли, если пользователь открывает корневой URL-адрес?

В настоящее время мой корневой маршрут указывает на компонент приборной панели, который анализирует роли и перенаправляет на желаемую страницу приборной панели, пользователя или администратора. Есть ли способ удалить компонент приборной панели?

AppRouting.ts

export const AppRoutes: Routes = [

    {
        path: '',
        redirectTo: 'dashboard',
        pathMatch: 'full'
    },  

{
        path: '',
        component: AdminLayoutComponent,
        canActivate: [AuthGuard],
        canLoad: [AuthGuard],
        children: [
            {
                path: 'dashboard',
                loadChildren: './dashboard/dashboard.module#DashboardModule'
            },

DashboardRouting.ts

export const DashboardRoutes: Routes = [

    {
        path: '',
        component: DashboardRedirectComponent,
    },

Тестовый компонент DashboardRedirect:

export class DashboardRedirectComponent implements OnInit, AfterViewInit {

    constructor(private auth: AuthenticationService, private router: Router) {

        let currentUser = JSON.parse(localStorage.getItem('currentUser'));

        if (this.auth.loggedIn()) {

            if (currentUser['role'] == 'User') {
                this.router.navigate(['/dashboard/user']);
            }

            if (currentUser['role'] == 'Admin') {
                this.router.navigate(['/dashboard/admin']);
            }
        }
    }

Я пытался реализовать это с помощью охранников и даже решателя, но не вышло. Когда я открываю корневую страницу своего приложения, оно переходит на панель инструментов и через несколько секунд переходит на соответствующую страницу панели инструментов, но я хотел бы сразу перейти к пользователю и без дополнительных компонентов для этого. Любое предложение ?


angular angular-routing angular-router-guards angular-router
person hxdef    schedule 28.01.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вам необходимо создать имя Guard как RedirectGuard следующим образом:

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable()
export class RedirectGuard implements CanActivate {
 let currentUser = null;
 let auth = null;

    constructor(private authenticationService: AuthenticationService) {
      this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
      this.auth =  authenticationService;
     }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
      //Your redirection logic goes here

      if (this.auth.loggedIn()) {

        if (currentUser['role'] == 'User') {
            this.router.navigate(['/dashboard/user']);
        }

        if (currentUser['role'] == 'Admin') {
            this.router.navigate(['/dashboard/admin']);
        }
    }
   return false;

    }
}

Используйте RedirectGuard внутри AppRouting.ts следующим образом:

path: '',
        component: AdminLayoutComponent,
        canActivate: [RedirectGuard],
        canLoad: [AuthGuard],
        children: [
            {
                path: 'dashboard',
                loadChildren: './dashboard/dashboard.module#DashboardModule'
            },
person Arun Saini    schedule 28.01.2019

arrow_upward
0
arrow_downward

Если вы хотите пропустить текущую маршрутизацию, вам нужно вернуть false от вашего охранника. При перенаправлении на основе ролей сначала проверьте, действительно ли пользователь выполняет маршрутизацию к вашему базовому компоненту /dashboard, а не к конкретному маршруту /dashboard/admin, иначе вы перехватите маршрутизацию на основе ролей. Затем проверьте роли и, когда вы хотите перенаправить, верните false, чтобы пропустить фактическую маршрутизацию.

E.g:

 canActivate (route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {

    const roles = this.permissionsService.getPermissions();

    switch (true) {
      case state.url !== '/home': {
        return true;
      }
      case !!roles['admin']: {
        this.router.navigate(['home', 'admin']);
        return false;
      }
      case !!roles['user']: {
        this.router.navigate(['home', 'user']);
        return false;
      }
      default: return true;
    }

  }
person J. S.    schedule 28.01.2019