标签: angular-route-guards

RxJS 初学者在这里。我正在使用 Angular 6，并试图弄清楚如何Observable<T>从Observable<Observable<T>>. 我不确定这是否有效，并且我正在努力从概念上理解它，但这似乎是一个简单的问题。

我研究过 switchMap、flatMap、forJoin，但我认为它们不符合我的需求。

我想做的是 Angular 路由防护，它将阻止用户访问路由，除非他们拥有必要的权限。2 个依赖项是从中获取信息的用户配置文件，然后用于获取其权限。这种混合导致了 Observable of Observable 问题。这是我所得到的：

export class AuthPermissionsRouteGuard implements CanActivate {
    constructor(
    private router: Router,
    private authService: AuthPermissionsService,
    private openIdService: AuthOpenIdService) {}
    
    /**Navigates to route if user has necessary permission, navigates to '/forbidden' otherwise */
    canActivate(routeSnapshot: ActivatedRouteSnapshot): Observable<boolean> {
        return this.canNavigateToRoute(routeSnapshot.data['permissionId'] as number);
    }

    /**Waits on a valid user profile, once we get one - checks permissions */
    private canNavigateToRoute(permissionId: number): Observable<boolean> {
        const observableOfObservable = …

我试图在导航到子级路由之前解析数据，因为我必须在儿童警卫队中使用该数据。问题是父级解析器，在解雇了儿童看守后解析数据。解析器需要很长时间才能解析数据

// app.module.ts
const appRoutes: Routes = [
  { path: 'login', component: LoginComponent },
  {
    path: '',
    component: SiteLayoutComponent,
    children: [
      { path: '', redirectTo: 'warehouse', pathMatch: 'full' },
      {
        path: 'warehouse',
        loadChildren: './warehouse/warehouse.module#WarehouseModule'
        // loadChildren: () => WarehouseModule
      }
    ],
    canActivate: [AuthGuard],
    resolve: {
      Site: SiteResolver // should be resolved before the guard is invoked.
    }
  },
  { path: '**', component: PageNotFoundComponent }
];

// warehouse.module.ts
const appRoutes: Routes = [

    { path: '', redirectTo: 'cash', pathMatch: 'full' }, …

我正在使用实现 canActivate 的路由保护

我在代码中放置了一堆控制台日志以了解它在哪里失败。

如果我导航到受保护的路线，会发生什么。导航失败，因为守卫未能返回值。我的 http 地图没有完成。

我目前有一个 JWT 令牌保存在我的会话存储中，但没有保存在我的本地

这些是我运行守卫时得到的控制台日志

running the local check

running the session check

got session token authorizing it

然后 http 地图回来，然后代码中断。

完整代码如下。帮助将不胜感激！

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import {
  CanActivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  Router
} from '@angular/router';
import {Injectable} from '@angular/core';
import {UserAuthorizationService} from "../userauthorizationservice/userauthorizationservice";


@Injectable()
export class ClientSuitsAdminSuperUserGuard implements CanActivate{
  constructor(private userservice: UserAuthorizationService, private router: Router){}
  user ={
    id: null,
    isclient: false,
    issuitsviewer: false,
    issuitsadministrator: false,
    issuitssuperuser: false,
    isvenueuser: false

  };

  canActivate(route: ActivatedRouteSnapshot, …

我正在尝试找到一种router-outlet根据用户的角色有条件地渲染子路由中的组件的方法。

例如，我有一个 DashboardComponent，其中包含一个router-outlet. 我希望在 child 中呈现的组件router-outlet根据用户角色而有所不同，该角色是通过令牌传入的，而无需指定其他路由。

我希望尝试在接近此的地方编写我的路线：

{ 
    path: 'dashboard', 
    component: DashboardComponent,
    children: [
        { path: '', component: DataViewsComponent }, // For standard user role
        { path: '', component: AdminViewsComponent } // For the admin user role
    ]
}

当然，这种确切的模式是行不通的，因为路由器只看到两条相同的路由路径。

我已经成功编写了一个服务，该服务使用该canActivate属性来检查用户的角色并根据角色转发到不同的路由：

@Injectable()
export class RoleRouteRedirectService implements CanActivate {

    roleRoutingPermissions: any = {
        // Will contain redirects for every route in the app
        // For this example, only contains reroutes for the dashboard …

我正在努力使用路线保护来保护我的Angular应用程序的前端.在过去与他们合作并在线研究时,为路由添加多个防护要求所有这些防护都返回true以允许访问.

但是如果我只想让一个返回true以允许访问呢？(比如||而不是&&)

例如,我的路线保护在用户的令牌中查找某些角色:

@Injectable()
export class ActiveRoleGuard implements CanActivate {
    constructor(private sessionService: SessionService, private router: Router) { }


    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        let token = this.sessionService.getToken();

        if (!token) {
             return false;
        }

        if (token.role.toLowerCase().indexOf("active") < 0) {
            this.router.navigate(["/issue"]);
            return false;
        }

        return true;
    }
}

和

@Injectable()
export class AdminRoleGuard implements CanActivate {
    constructor(private sessionService: SessionService, private router: Router) { }


    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        let token = this.appSessionService.getToken(); …

我有一个使用 Angular 4 开发的现有项目。我需要根据用户权限控制对特定路由的访问。简化的路由配置如下所示：

[
    { path: '', redirectTo: '/myApp/home(secondary:xyz)', pathMatch: 'full' },
    { path: 'myApp'
      children: [
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        { path: 'home', ... },
        ...
        { path: 'product'
          children: [
            { path: '', redirectTo: 'categoryA', pathMatch: 'full' },
            { path: 'categoryA', component: CategoryAComponent, canActivate: [CategoryACanActivateGuard]},
            { path: 'categoryB', component: CategoryBComponent},
            ...
          ]
        },
        ...
      ]
    },
    ...
]

现在，我想控制对www.myWeb.com/myApp/product/categoryA. 如果用户没有足够的权限，他/她将被重定向到... /product/CategoryB。我已经写了一个CanActivateRouteGuard 来做到这一点，守卫类看起来像这样：

import { Injectable } from …

我无法在 Ionic 5 中实现 canDeactivate 防护。以下是我的代码。

模型.ts

export interface isDeactivatable {
    canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
 }

离开页面.guard.ts

export class LeavePageGuard implements CanDeactivate<isDeactivatable>{
  canDeactivate(
    component: isDeactivatable
  ): Observable<boolean> | Promise<boolean> | boolean {
    console.log('LeavePageGuard');
    return component.canDeactivate();
  }

}

测试页.ts

export class TestPage implements OnInit, isDeactivatable{
      canDeactivate(): Observable<boolean> | Promise<boolean> | boolean {
        console.log('canDeactivate in TestPage');
        return true;
      }
}

本地路由.Module.ts

const routes: Routes = [
  {
    path: '',
    component: HomePage,
    children:[
      {
        path: 'test',
        loadChildren: () => …

我正在尝试创建一个AuthGuard来检查用户是否可以访问路由，否则重定向到登录视图。我想Observable<Boolean|UrlTree>从该 canActivate方法返回一个。这是我到目前为止所拥有的。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

    return this.store$.select(appState => appState.auth.authUser)
    .pipe(map(authUser => Boolean(authUser)));
}

但是，我不太确定如何/在哪里可以从可观察到重定向到 UrlTree /login，因为我对这整个事情很陌生，特别是 rxjs。预先感谢您的任何帮助。

我有一个 Angular 7 应用程序，其中有一条像这样的路线

{ path : 'forgot-password/:resetHash/:email', 
  component : ForgotPasswordComponent, 
  canActivate : [ForgotPasswordPageGuard]},

现在我尝试访问该路由params，route-guard但我没有在防护中获取路由参数。这是我的forgotpassword.route.guard.ts

constructor(private _utilityService: UtilitySerivce, private _dataService: DataService, private _const: Constants, private _router: ActivatedRouteSnapshot) {
}

canActivate = (): boolean => {
    console.log('in link expiry guard')
    let userEmail = this._router.paramMap.get('email');
    let isAllow = false;

    console.log('params : ', userEmail)
    userEmail = this._utilityService.decryptMsgByCryptoJs(userEmail);
    console.log('user email : ', userEmail)
    this._dataService.post(this._const.userResetPasswordLinkExpiry, { email: userEmail }).subscribe(resp => {
        if (resp.success) {
            isAllow = true;
        } else { …