- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在我的 Angular 8 应用程序中,我有 3 个延迟加载模块。每个模块都针对特定用户的角色。我正在为 Auth 和 Role Guard 使用 canActivate 接口(interface)。
对于以下路线
{ path : '' , pathMatch : 'full' , redirectTo : ''}
我应该如何使用 redirectTo 属性,以便它根据用户角色重定向到延迟加载的路由。这是路由模块的代码。
app.routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path : '' , pathMatch: 'full' , redirectTo : ''},
{ path : 'admin' , loadChildren : () => import('./modules/admin/admin.module').then(mod => mod.AdminModule) , canActivate : [AuthGuardService] , data : { role : 'admin'}} ,
{ path : 'member' , loadChildren : () => import('./modules/member/member.module').then(mod => mod.MemberModule) , canActivate : [AuthGuardService] , data : { role : 'member'}} ,
{ path : 'user' , loadChildren : () => import('./modules/user/user.module').then(mod => mod.UserModule) , canActivate : [AuthGuardService] , data : { role : 'user'}} ,
{ path : '**' , component : NotFoundComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
AuthGuardService.ts
import { Injectable } from '@angular/core';
import { Router , CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from '../auth-service/auth-service.service';
@Injectable({
providedIn: 'root'
})
export class AuthGuardService implements CanActivate {
constructor(
private router: Router,
private authService: AuthService
) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : Observable<boolean> | Promise<boolean> | boolean {
const currentUser = this.authService.userVal;
const role = route.data.role;
if (currentUser) {
if(role && role.indexOf(currentUser.role) > -1)
return true;
else
return false;
}
return false;
}
}
最佳答案
再次感谢@DeborahK。经过这个 Github Disucssion ,这是可行的解决方法。
app.routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path : '' , pathMatch: 'full' , redirectTo : '' , canActivate : [RedirectGuardService]},
{ path : 'admin' , loadChildren : () => import('./modules/admin/admin.module').then(mod => mod.AdminModule) , canActivate : [AuthGuardService] , data : { role : 'admin'}} ,
{ path : 'member' , loadChildren : () => import('./modules/member/member.module').then(mod => mod.MemberModule) , canActivate : [AuthGuardService] , data : { role : 'member'}} ,
{ path : 'user' , loadChildren : () => import('./modules/user/user.module').then(mod => mod.UserModule) , canActivate : [AuthGuardService] , data : { role : 'user'}} ,
{ path : '**' , component : NotFoundComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
redirect-guard.service.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from '../auth-service/auth-service.service';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class RedirectGuardService implements CanActivate {
constructor(
private router: Router,
private authService: AuthService
) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : Observable<boolean> | Promise<boolean> | boolean {
const user = this.authService.userVal;
if (user) {
this.router.navigate(['/'+ user.role]);
return true;
}
this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
return false;
}
}
关于typescript - redirectTo 基于用户角色的惰性模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57357145/
在我的 Angular 8 应用程序中,我有 3 个延迟加载模块。每个模块都针对特定用户的角色。我正在为 Auth 和 Role Guard 使用 canActivate 接口(interface)。
在我的 Angular 8 应用程序中,我有 3 个延迟加载模块。每个模块都针对特定用户的角色。我正在为 Auth 和 Role Guard 使用 canActivate 接口(interface)。
我的 $routeprovider 有一个配置,当我将 redirectTo: function() {'/dasboard'} 更改为 redirectTo: function() {'/home'
我第一次开发 Firefox 扩展,多亏了文档,它进展得相当快。但是我有一个问题:如果用户访问某些域,我不想重定向他们。 const {Cc, Ci, Cr, Cu} = require("chrom
给定路由配置 @RouteConfig([ new Route({ path: '/app/index.html', name: 'default', redirectTo: ['/View1
我最近开始了一个基于 Angular 2.0.0 并结合 Angular Router (V3.0.0) 的新项目。因此,我对辅助路线有疑问。 我想将我的应用程序拆分为出现在导航栏、主要内容、页脚等每
一切都在标题中:您可以使用 redirectTo 属性重定向到相对 URL 吗? 我的(简化的)路由如下: {path: 'login', children: []}, {path: '', chil
我正在开发一个 Angular 应用程序,它具有以下URL路径, /(根目录) /类(class) /类(class)/创建 /类(class)/:id /验证/登录 我已为除 auth/login
假设我有以下代码: ... routes: { 'someurl:{param}': { action: 'action', before: 'beforeac
谁能告诉我component、loadChildren、redirectTo之间的区别? export const ROUTES: Routes = [{ path: '', redirectT
我正在使用一个函数来确定在加载网站时应将用户重定向到何处。像这样: { path : '', redirectTo: redirector(), pathMatch: 'full' } r
我正在使用 angular 2 开发我的第一个应用程序,我遇到了一个奇怪的问题。 我的路由配置是这样的: export const routes: RouterConfig = [ { path: '
我们可以覆盖此属性以在 LoginController 中登录后重定向用户: protected $redirectTo = '/home'; 这是文档中的声明: If the redirect pa
我有这样的路线 const pipelinesRoutes: Routes = [ { path: ':type', component: CatalogComponent,
我只是想使用参数重定向到错误页面。它被编码为 /error%3Ftype=404。 这会破坏路由。该路线永远不会激活。通过输入或定位,一切都变得魅力十足。 otherwise( { redir
redirectTo无法重定向到带有 canActivate 的链接当我登录时. redirectTo当我注销时工作正常,它重定向到我的 /login组件和 redirectTo至 /index登录后
我的 RouteConfig 定义了以下路径 @RouteConfig ([ { path:'/main',name:'Home',redirectTo: ['Setup']}, {
redirectTo 属性在我的 Angular 2 应用程序中不起作用。我的 app.routing.ts 中有以下路线: const routes: Routes = [ { path: ''
我有一些路由模块,其主要路径设置为:/canvas const canvasRoutes: Routes = [ { path: "canvas", component: Ca
如果可以将路径:''重定向到路径:':id',我正在徘徊?有什么办法可以实现吗? 谢谢。 { path: 'folder', children: [ { path: '',
我是一名优秀的程序员,十分优秀!