标签: angular-router-guards

return this.auth.user.pipe(
      switchMap((user: IUser) => {
        return of(true);
      })
    );

我的初始代码有些复杂，在某些情况下取决于用户数据，但是出于测试目的，我在警卫队的canLoad中使用了上面的代码，并且该代码无法激活。

任何TS /编译错误。

无论是否使用常春藤，我都尝试过。

我正在使用Angular 8.3;

我知道当canActivate函数返回一个简单的时boolean,角度路径保护以指定的顺序执行,但是,如果守卫返回类型Observable<boolean>或Promise<boolean>？

路线示例:

{
    path: 'confirm',
    canActivate: [AuthGuard, SessionExpiredAuthGuard, CheckoutAuthGuard],
    component: CheckoutReviewOrderComponent
},

SessionExpiredAuthGuard和CheckoutAuthGuard都返回类型Observable<boolean>.我不希望在SessionExpiredAuthGuard完成从异步http请求中检索数据之前执行CheckoutAuthGuard.

有没有办法强制这些异步防护按顺序执行？

我是角度新手。

我怎么解决这个问题？

我已经安装了 AngularCLI: 11.0.7和 Node：12.18.4

我已经安装了 Angular 路线防护：

ng g guard auth --skip-tests

错误：

错误：src/app/_guards/auth.guard.ts:15:5 - 错误 TS2322：类型 'Observable<true | undefined>' 不可分配给类型'Observable'。输入“布尔值|” undefined' 不可分配给类型'boolean'。类型“未定义”不可分配给类型“布尔”。

 15     return this.accountService.currentUser$.pipe(
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 16       map(user => {
    ~~~~~~~~~~~~~~~~~~~
...
 19       })
    ~~~~~~~~
 20     )
    ~~~~~
src/app/_guards/auth.guard.ts:16:11 - error TS7030: Not all code paths return a value.

16       map(user => {
             ~~~~~~~~~

Run Code Online (Sandbox Code Playgroud)

代码：

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

为什么id在后卫中不可用？

@Injectable()
export class ProjectDetailsGuard implements CanActivate {

    constructor(private activatedRoute: ActivatedRoute) { }

    canActivate() {
        const id = this.activatedRoute.snapshot.params['id'];

        console.log(id); // <-- undefined
    }

}

在组件内部实现时，相同的代码可以完美地工作。

我正在建立一个在线商店,并且有一个管理部分,您可以从中跟踪订单并对其进行修改.

它受到身份验证的保护,这是在节点服务器上完成的,密码被散列到数据库等中,但我担心路由保护仍然被绕过.

我正在使用Angular v6,如果用户没有登录,我已经实现了从仪表板到登录页面的重定向.
我对这两个选项感到困惑:

1. 添加登录保护文件以检查登录状态并重定向到仪表板
2. 检测路由更改事件,在此处检查登录状态并重定向
   

这个案例有什么更好的解决方案？

我的路由是

{
path:'contacts/:id',
component: contactDetail
}

在

canActivateChild( route: ActivatedRouteSnapshot,
state: RouterStateSnapshot) { 
  console.log(state.url); 
}

state.url返回/contacts/1我需要的是匹配的url/contact/:id是否有可能获得匹配的url？

基本上我现在有以下 Angular 模块：

1. landing
2. admin
3. core
4. shared

我想要的是注册一个在模块AuthenticationGuard内调用的新守卫shared，并在不同的模块中提供它。

目前，只有当我在landing-module( 这是我引导的) 中注册守卫时，它才起作用，而如果我在 或 中注册它，它也admin.module不起作用shared.module。

如果我这样做，我会收到一条错误消息，内容如下：

注册guard是通过providers相应模块的数组完成的。

我的目标是能够在所有模块中使用它。

core从模块内注入服务没有问题- 所以我认为两者admin之间一定存在差异？guardsservices

目前一些相关文件看起来像这样（为了简洁起见缩短了）：

登陆模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { HomeComponent } from './home/home.component';
import { LandingRoutingModule } from './landing.routing.module';

import { SharedModule } from '../shared/shared.module';
import { CoreModule } from '../core/core.module';
import { SecurityModule } from …

在我的角度路由模块中，我在默认主页时使用基本导航，现在在某些情况下，我想决定导航哪条路线。这就是我的应用程序路由的样子。

 { path: '', redirectTo: 'home1', canActivate: [homepageGuard], pathMatch: 'full' },
  { path: 'home1', loadChildren: './lazyloadedmodule1' },
  { path: 'home2', loadChildren: './lazyloadedmodule2' },
  { path: 'home3', loadChildren: './lazyloadedmodule3' },
  { path: 'basehome', loadChildren: './lazyloadedmodule4' }

现在在我的路线守卫中，我像这样调用订阅。

canActivate(): Observable<any> | boolean {
    return this._myService.getCurrentApp().subscribe(
      (r) => {
        if(r === 'app1'){
          //navigate to app1homepage
        } else if (r === 'app2') {
          //navigate to app2homepage
        } else {
          // navigate to base homepage
        }
      },
      (e) => {
        console.log(e);
        return false;
      }
    ); …

我创建了一个用户输入数据的应用程序。在该应用程序上，我想实现路由器防护来拒绝用户返回页面，这样他们就不会丢失数据。如果用户单击浏览器上的后退按钮，它会重新加载页面而不是返回？

我正在考虑使用 canDeactivate 拒绝访问上一页，并使用 Angular Location 来确定用户所在的页面，然后重新加载该页面。但我不知道如何实现这一点。

import {Router, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree} from '@angular/router';

@Injectable({provideIn: 'root'})
export class FooGuard implements CanActivate {
  constructor (private readonly router: Router) {}

  canActivate (next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<UrlTree> {
    const xxx = myMagic(next); // irrelevant app logic that depends on next url only

    return (async () => this.router.parseUrl(xxx));
  }
}

试图找到一个没有一页额外样板的测试代码示例。希望每个模拟可以有接近 5-6 行代码。需要：

• 模拟Router
• 模拟ActivatedSnapshot