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

Question

我定义的路线如下：

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

我想根据已登录的用户角色来路由我的默认路由。如果是学生，我想默认我的路径：'**' 被重定向到 '/student'。同样，对于教师角色，我希望它默认为“/教师”。如何通过根据角色默认路由到不同的 url 来实现这种基于角色的导航？

Answer 1

您可以使用路由解析器。

这是我的一个：

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);
    }
}

此代码将阻止路由继续，直到检索到电影。

您可以执行类似的操作来检索您的角色。然后，您可以使用检索到的数据根据用户的角色激活不同的路由，而不是简单地返回。

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;
  }
}

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

Angular 4 routing default page based on role

authentication

angular2-routing

angular