角6认证保护

Question

我遵循了关于在我的应用程序上设置带有假后端的JWT身份验证的教程，但是我仍然坚持身份验证。实际上，我只是尝试访问一个客户端面板或一个具有两个不同角色的“管理”面板，它们分别是" client“和"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”状态登录，它不起作用，并且在我执行警报(ExpectedRole)时仍然显示"conseiller“状态；

我想我的道路设置出了一些错误或者类似的东西。放纵一点，我是个有棱角的初学者。;)

谢谢,

Answer 1

您有相同的路径(空的，默认的路径)定义三次。这是第一个。

您必须为客户端定义不同的路径。

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

Answer 2

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

我想提出以下几点：

1. app-routing.module.ts
2. auth.guard.ts
3. authentication.service.ts
4. user.service.ts
5. local-storage.service.ts
6. login.component.ts
7. home.component.ts
8. advisor-home.component.ts
9. 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 
}