标签: angular-guards

我正在尝试制作旧时尚应用程序的 Angular 2 版本。有一项服务会向服务器发送重复请求以检查用户是否正在登录。登录守卫将检查轮询以查看登录会话结果（从请求中获取）是否有效，以便向路由返回正确的信号。

这是我的服务功能：

getUser(): Observable<User> { return this.http.get<User>(this.userUrl); }

这是我的守卫的 canActive 函数：

canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean { // const isLoggedIn = this.authService.isLoggedIn(); return this.authService.getUser().flatMap((data) => { console.log(data); if (data.id === 1 && data.name === 'Beany' ) { console.log(1111) return Observable.of(true); } else { console.log(2222) this.router.navigate(['pages/login']); return Observable.of(false); } });

该路线有效，但只有 1 次。不确定是否可以重复此操作（当请求完成时，服务将重新向服务发送检查，当然我应该为此设置一点超时）？

我正在尝试实现UrlTree在防护失败时重定向用户。 this.authService.isAuthenticated()返回可观察的。

以下不起作用，但它可以控制台false。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree {
  this.authService.isAuthenticated().subscribe(isAuthenticated => {
    if (isAuthenticated) {
      return true;
    } else {
      console.log(isAuthenticated);
      return this.router.createUrlTree(['auth/sign-in']);
    }
  });
  return false;
}

但如果我删除订阅，则以下内容有效：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree {
  return this.router.createUrlTree(['auth/sign-in']);
}

我是角度新手。

我怎么解决这个问题？

我已经安装了 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 } …

我想为用户路由实现canActivate，然后再检查访问令牌是否仍然有效。因此，我实现了这样的事情

export class AuthGuard implements CanActivate {
  data:Array<Object>;
  constructor(private base: BaseService){}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {

    var session: any = { token: localStorage.getItem('abc') };   

    this.base.valid(session).subscribe(result => {
      this.data=result;
      console.log(this.data); <-- first 
    });

    console.log(this.data); <-- second
    return true;
  }
}

在这里，当我进行控制台操作时，可以在subscribe方法中获取数据变量，但是在此方法之外是给定undefined值。如何在方法之外访问它。

我有一个nodejs（express）作为服务器端，一个Angular 6作为客户端。在服务器中，我有中间件功能来进行会话检查。如果会话无效或不存在，我想向客户端发送响应，以便客户端可以对其做出反应。我想到从服务器返回401的响应代码，并在客户端中创建某种listener\route-guard\HttpInterceptor，这样 - 它可以管理客户端中的情况（例如将其重定向到登录页面） 。这是我在服务器中的代码：

router.use('/', (req, res, next) =>
{
    if (!req.session.user)
    {
        res.status(401);
    }
    else{
        next();
    }
})

我如何在角度应用程序中捕获/收听此响应？

我有这些路线

应用路由

{
   path: 'user',
   canLoad: [AuthGuard],
   loadChildren: () =>
   import('./user/user.module').then((m) => m.PublicUserModule)
}

用户路由

{
    path: '',
    component: PublicUserPageComponent,
    canActivate: [UserPhonesCheckGuard],
    children: [
      /*{
        path: '',
        pathMatch: 'full',
        redirectTo: 'check'
      },*/
      {
        path: 'account',
        loadChildren: () =>
          import('./account/user-account.module').then(
            (m) => m.PublicUserAccountModule
          )
      },
      {
        path: 'check',
        loadChildren: () =>
          import('./check/user-check.module').then(
            (m) => m.PublicUserCheckModule
          )
      }
    ]
  }

根据某些条件使用 UserPhonesCheckGuard 我想重定向或检查或帐户子路由，但使用

canActivate() 
    return this.router.parseUrl('/user/check');
  }

浏览器发疯了:(

我应该使用什么路径？

我没有登录页面，这是 sso 调用

在应用程序组件中，我已经调度了一个操作来加载服务器端令牌调用并获取令牌，并且根据用户角色，我可以激活路由中的防护。如果守卫激活返回 true，我将进入仪表板页面。

在仪表板页面中，我在浏览器 URL 中有一个刷新，可以激活在登录操作效果之前执行，因此可以激活返回 false 且页面显示空白。

在仪表板中有子路由，也有一些子链接，例如产品仪表板/产品，也有激活的防护，但可以在登录调度操作影响成功调用之前激活返回 false。

谁能帮助我我做错了什么？

这里是路由，

  {
    path: '',
    component: HomeComponent,
    canActivate:[AuthGuard],
    children: [
      {
        path: 'product',
        loadChildren: () => productModule
      },
      {
        path: 'order',
        loadChildren: () => orderModule
      }
    ]
  },

这是激活方法：这里我从效果调用中获得成功，同时从 app.component 调度一个操作：

  canActivate(): Observable<boolean> {
     return this.store.select(appState => appState.auth.isAuthenticated)
      .pipe(map(authUser => {

        if (!authUser) {
          return authUser;
        }
        return authUser;
      }))
    }

应用程序组件：

ngOnInit(){



   this.onSubmit();

}

onSubmit(): void {
  const payload = {
    email: 'test@test.com',
    password: 'admin'
  };
  alert('dispatch …

我正在使用 Spring boot 开发 Angular 应用程序。我开发了一个登录页面，以用户名和密码作为输入。一种 Web 服务，用于从后端对用户进行身份验证并发送成功和失败的响应。以及身份验证成功后显示的主页。

发生的情况是，我也可以在不登录的情况下直接打开主页 URL，但这不是正确的。

我需要的是实现一种机制来检查用户是否登录，并据此显示 URL 页面或登录页面。