Question

我遵循了有关在应用程序上设置带有伪造后端的JWT身份验证的教程，但是我对身份验证感到困惑。实际上，我只是试图访问具有两个不同角色的客户端面板或“管理员”面板，即管理员角色是“客户端”和“ conseiller”。

文件：app.routing.ts

const appRoutes: Routes = [
{ 
path: '',
component: AdvisorHomeComponent, 
canActivate: [AuthGuard], 
data: { 
    expectedRole: 'conseiller'
  } 
},
{
path: '',
component: ClientHomeComponent, 
canActivate: [AuthGuard], 
data: { 
  expectedRole: 'client'
  } 
}
{ path: '', component: LoginComponent},
{ path: 'login', component: LoginComponent }, 
{ path: 'register', component: RegisterComponent },

// otherwise redirect to login
{ path: '**', redirectTo: '/login' }
];

文件：auth.guard.ts

@Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router) { }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    const expectedRole = route.data.expectedRole;
    let currentUser = JSON.parse(localStorage.getItem('currentUser'));
    alert(expectedRole);
    if (currentUser && currentUser.statut == expectedRole) {
        // logged in so return true
        return true;
    }

    // not logged in so redirect to login page with the return url
    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url 
    }});
    return false;
 }
}

我注意到的错误是，当我尝试以“ conseiller”状态登录时，它可以正常工作，因为信息在我的配置中位于第一位，但是如果我之后尝试以“ client”状态登录，则它当我执行 alert（expectedRole）;

时，它不起作用，并且仍然向我显示“ conseiller”状态

我认为我的路径设置有问题或类似问题。放纵自己，我是Angular的初学者。 ;）

谢谢

Answer 1

您定义了3次相同的路径（空，默认路径）。它需要第一个。

您必须为客户端定义其他路径，例如

{path: 'client', component: ClientHomeComponent, canActivate: [AuthGuard], data: { 
    expectedRole: 'client'
  } 
}

Answer 2

我认为有两种方法可以实现您的目标。 @PeS为您提供了最简单的解决方案。我仍然想发表一些意见。

我将创建以下内容：

app-routing.module.ts
auth.guard.ts
authentication.service.ts
user.service.ts
local-storage.service.ts
login.component.ts
home.component.ts
advisor-home.component.ts
client-home.component.ts

app-routing.module.ts

const appRoutes: Routes = [
  { path: '', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent }, 
  { path: 'register', component: RegisterComponent },

  // otherwise redirect to login
  { path: '**', redirectTo: '/' }
];

auth.guard.ts

您的示例auth.guard.ts看起来不错。您必须对其进行编辑，才能从用户服务或与路由数据相反的角色获得角色。

home.component.ts

此组件将是工厂。让用户查看他们具有什么角色，并且可以基于该角色手动插入特定组件。因此，根据角色，您将添加advisor-home.component.ts或client-home.component.ts。这是StackBlitz关于如何创建工厂的说明。

Answer 3

export authGuardFn(data) {
  @Injectable({ providedIn: 'root' })
  class AuthGuard implements CanActivate {
  constructor(private router: Router) { }
  
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
      const expectedRole = data.expectedRole;
      let currentUser = JSON.parse(localStorage.getItem('currentUser'));
      alert(expectedRole);
      if (currentUser && currentUser.statut == expectedRole) {
          // logged in so return true
          return true;
      }
  
      // not logged in so redirect to login page with the return url
      this.router.navigate(['/login'], { queryParams: { returnUrl: state.url 
      }});
      return false;
   }
  }
  return AuthGuard 
}

Angular 6身份验证防护

3 个答案: