【问题标题】:Angular6 + Loopback : "isAuth" What the best way to not write the same code in each component ?Angular6 + Loopback:“isAuth”不在每个组件中编写相同代码的最佳方法是什么?
【发布时间】:2018-09-26 02:59:43
【问题描述】:

我正在测试 angular6 + 环回... 在我的步骤中,我可以创建我的帐户并登录,所以我会返回一个包含登录用户信息的用户对象......

在我的模板中,我有一些项目只想显示给登录用户。所以我做了一个服务,它将发送一个 Observable,并根据它的值,我显示或不显示我需要的每个组件中的项目......

但是,要做到这一点,我需要在每个组件中,调用我的服务,再次创建对我的 Observable 的订阅..

有时我有几个嵌套组件,我需要检查用户是否已登录。因此,在页面上的一个组件已经可以使用相同的代码时,多次重新键入相同的代码似乎是多余的。

所以我的问题是......我真的应该为每个组件订阅,还是有办法订阅全局服务或从父组件继承订阅?最好的做法是什么?

我通过创建一个带有对象的 global.ts 文件来进行一些测试,我在登录后将我的用户登录数据放入其中,然后我只需将该文件导入每个组件中,这样我就可以在需要的地方轻松使用,但我我不确定这是一个很好的做法,我遇到了这种方法的一些问题。

欢迎提出任何建议。

最好的,

迈克

【问题讨论】:

    标签: angular observable loopback angular-loopback


    【解决方案1】:

    您应该实现一个structural 指令,根据用户是否经过身份验证添加/删除元素。

    非常棒的article about structural directives,他们创建了类似的指令,根据用户角色添加/删除内容。

    【讨论】:

    • 在这篇文章中,他们使用@input 来在组件之间共享数据... 很高兴知道,homeover,我们不能在 中绑定数据> 使用这种方法.. 由于我的目标是在应用程序的顶层共享数据,似乎唯一的方法是直接在路由对象中添加数据。但现在我找不到将我的服务结果添加为数据的方法。
    • 您应该使用路由器防护来防止状态在不应该激活时激活,即。当用户未登录时,以及当您想要阻止部分组件呈现时的结构指令。
    猜你喜欢
    • 2020-07-09
    • 2022-01-23
    • 1970-01-01
    • 2015-01-20
    • 2017-06-10
    • 1970-01-01
    • 2017-12-28
    • 2013-04-13
    • 1970-01-01
    相关资源
    最近更新 更多