问题标签 [auth-guard]

我有一个简单的 Ionic 4/5 选项卡式应用程序（我从他们的选项卡启动器开始）。我想制作一个由身份验证保护的选项卡。这是我想要实现的目标：

• 为登录用户、配置文件管理、帐户管理等保留选项卡之一。
• 因此，当用户单击第三个选项卡时，默认页面是由 AuthGuard 保护的“配置文件”，如果 ionic 存储中没有用户，则重定向到登录/注册页面

这是我到目前为止所尝试的：

还有守卫：

问题在于，一旦经过身份验证，authguard 就永远不会进入map. 我把它放在skip(1)那里是因为我想跳过初始null值。我怎样才能“推迟”AuthGuard，直到我的 AuthService 检查用户是否存在于存储中，因为毕竟这就是我想要做的。

我有一个 Angular 应用程序，一个我在 Angular 6 中构建的简单仪表板。现在我正在尝试添加登录和身份验证，因此为此我创建了一个 AuthGuard

在应用程序路由中，我已经配置了我的路线

因此，每当我在未登录时单击任何链接时，RouteGuard 都会将我重定向回登录，但成功登录后，我就可以访问该页面。我面临的问题是，每当我单击 http 链接时，我都会有一个表单，并且在提交该表单时，我正在向 git 发出 http 请求。这是我的 HttpCallComponent 的 html

在 .ts 中，我正在调用 git

所以当我点击提交时，我被重定向到登录页面。请在我做错的地方帮助我。提前致谢。

编辑：我想我发现了这个问题，所以这是我的拦截器，它正在为 github 用户 api 调用添加额外的授权。

对我来说，我只想让拦截器跳过https://api.github.com/users/调用，它不应该向它添加任何授权，所以请你帮我跳过任何特定的 url。

在用户登录之前，我正在使用 AuthGuard 保护组件。AuthGuards 可以工作，但是每当对组件进行更改并保存时，页面都会自行刷新并变为空白，并且控制台中没有错误。

我查看了 Stack Overflow 上发现的类似问题，但问题不同，还没有找到解决方案。

应用程序路由.module.ts：

authguard.service.ts：

我希望新更改能够立即可见，每当进行新更改时，不必一直返回登录页面，而是再次登录，然后返回组件查看新更改。

全部，

在实施 auth 保护之前，我能够从登录和注册屏幕中隐藏我的导航栏。通过读取 component.ts 中的路由事件并通过 ngIf 隐藏导航栏。在我实施 auth guard 之后，auth guard 到登录页面的路线没有隐藏下面的导航栏是我的代码..

在这里，我的身份验证服务将检查用户是否已通过身份验证服务进行身份验证（将从 cognito 获取数据）。现在，我怎样才能从 auth 守卫发生的路线中隐藏导航栏。请帮忙

app.component.html

app.component.ts

路线.ts

auth.guard 服务：

我将我的 Angular 应用程序重定向到 Spotify 登录 ( https://accounts.spotify.com/authorize ) 一旦他们登录，他们就会被重定向回http://localhost:4200/callback。此 URL 附加了一个令牌。但它立即重定向到（我希望它重定向到这里）：

const appRoutes: Routes = [{ path: 'callback', redirectTo: '/host', pathMatch: 'full' }]

我如何/在哪里可以保留身份验证令牌而不将其放在用户 URL 中？

我意识到我最终也将需要 AuthGuards，但首先我想检索令牌。

希望我能在这里得到一些澄清并在我去的时候学习一些东西。

所以我有一个AuthService检查localStorage键和其中的值的方法。这是一个可观察的和.next返回的值。在 Guard 中，我引用了这个并且效果很好。但是，我注意到我在防护中没有重定向到登录页面，因此它会清空页面，当它没有被授权时就是这样。

这是我的代码。

我如何转换它Observable，AuthService以便我可以做类似的事情

我正在寻找解决我的项目问题的方法。我有 http 调用来获取userPermissions，我有两个地方使用它：

1. 路径上的身份验证守卫
2. 组件模板中的指令

有一种情况同时发生（使用 auth guard 加载带有指令的子组件的路由），我正在寻找一种解决方案，如果需要，只进行一次 http 调用，而不是为每个调用。没有redux，有什么“简单”的方法吗？

您可以在下面找到示例代码，它并不完全相同，但可以让您了解我正在尝试做什么。

用户服务.ts

一些.component.ts

auth.directive.ts

app.module.ts

auth.guard.ts

我希望我的身份验证保护基于定期触发布尔值的可观察对象来允许/限制访问。我的想法是：

它在触发器从false到时起作用true，但不是相反，看起来警卫不再处于活动状态。

我是 Angular 的新手，如果用户通过身份验证，我会在网上花费大约 2 到 3 个小时来尝试从登录导航到仪表板。如果我不使用 canActivate: [AuthGuard]，我可以路由到仪表板。但是，一旦我添加 canActivate: [AuthGuard] 我就卡在了登录页面上（尽管我在 firebase 控制台上看到了用户 SignIn）。它只是没有将我导航到仪表板页面

我的代码..

应用程序路由.module.ts

auth.guard.ts

我还在 app.module.ts 的提供者中添加了 [AuthGuard] 任何帮助将不胜感激

在我的 Angular 应用程序中，管理员用户创建其他用户和角色。

在创建角色时，管理员可以为其添加权限。即这种类型的用户角色可以访问哪些菜单项？

具有挑战性的部分是，我需要为路由指定身份验证保护。

例如 ，

主管角色类型可以访问 - 菜单项 1 菜单项 2 、菜单项 4 、菜单项 5

工程师角色类型可以访问 - 菜单项 3，菜单项 6

所有的菜单项都是独立的模块。

当工程师试图通过 URL 访问菜单项 1 时，他应该被重定向。

请帮我解决这个问题。任何高级方法对我来说都很好。提前致谢