基于角色的Angular 4路由默认页面

Question

I have defined my routes as below:

const appRoutes: Routes = [
 {
  path: 'teacher',
  component: 'TeacherComponent'
 },
{
  path: 'student',
  loadChildren: './components/student/student.module#StudentModule',
  canLoad: [AuthGuard]
},
{ path: '**',   redirectTo: '/' }
];

I want to route my default routing based on the loggedIn user role. If it's student, I want to default my path: '**' to be redirected to '/student'. Similarly for Teacher role I wanted it to default to '/teacher'. How to implement this role based navigation by defaulting route to different urls based on the role?

Answer 1

You can use a route resolver.

Here is one of mine:

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

import { Observable } from 'rxjs/Observable';

import { IMovie } from './movie';
import { MovieService } from './movie.service';

@Injectable()
export class MovieResolver implements Resolve<IMovie> {

    constructor(private movieService: MovieService) { }

    resolve(route: ActivatedRouteSnapshot,
            state: RouterStateSnapshot): Observable<IMovie> {
        const id = route.paramMap.get('id');
        return this.movieService.getMovie(+id);
    }
}

This code will prevent the route from continuing until the movie is retrieved.

You could do something similar to retrieve your roles. Then instead of simply returning, you could use the data you retrieved to activate different routes depending on the user's role.

Answer 2

{ path: "", component: LoginViewComponent, pathMatch: "full",canActivate:[AuthGuard] }

    @Injectable()
export class AuthGuard implements CanActivate {
  role: string = "A";

  constructor(private router: Router) {}

  canActivate() {
    const route = this.role === "A" ? "/home" : "/catalog";
    this.router.navigate(['/home']);
    return true;
  }
}