Question

我有一个app.component，用菜单管理标题。该组件的html有条件地检查变量“isAdmin”和“isAuthenticated”是否为真，因此可以启用/禁用每个菜单链接。

当我通过auth.component和auth.service登录时，我通过ngOnInit接口实现中的observable set返回app.component用户的状态：

ngOnInit() {
    this.isAuthSubscription = this.authService.isAuth$
        .subscribe(
        val => {
            let role;
            role = val
            this.isAuthenticated = false;
            if (role) {
                this.isAuthenticated = true;
                this.isAdmin = false;
                if (role == 'admin'){
                    this.isAdmin = true;
                }
            }
            this.user = this.helpService.getUser();
        });
}

如果我在页面内部工作一切正常，但如果我刷新页面，请按浏览器网址栏上的Enter键，我会丢失有关“isAdmin”和“isAuthenticated”的所有信息。

刷新会激活我插入的服务器http get方法以避免404状态响应：

jAppRouter.get('/', function (req, res, next) {
    res.render('index');
});

它可能取决于信息遇到的可观察性，但如何解决这个问题呢？我基本上希望能够从不同的组件刷新我的菜单（app.component），也许这不是正确的方法... 谢谢最大

Answer 1

这将是任何不属于Angular的SPA的预期行为。当浏览器刷新发生时，应用程序将失去其状态，并且完全不知道之前已执行的操作。

Answer 2

如果它可以帮助某人我分享我做的工作（我花了很多时间）。

我使用了我的身份验证令牌（已经放入localstorage）来发出服务器调用，以检查用户是否是管理员。

有了这些信息，我总能在任何地方刷新我的菜单（存在于app.component中）。

问题是要正确同步所有操作。

我基本上在两个地方执行此操作：当用户登录时以及刷新浏览器时。

由于我希望我的应用程序保持有效状态且一致，因此需要进行更新。

在App.Component中：

在ngOnInit我调用一个自定义服务函数，如果用户是管理员，则返回我，所以当我刷新时我立即获得这些信息;第二，我插入一个订阅者，通知我用户已登录。

 ngOnInit() {
     this.authService.isAdmin().subscribe(
     ret => {
     this.isAdmin = ret;
    });
  this.isAuthSubscription = this.authService.isAuth$
  .subscribe(
      val => {
      this.isAdmin=this.authService.IsAdministrator();
      this.isAuthenticated = val
     });
 }

此订阅者将通知用户已登录。

我做的一个技巧是在我的（全局）自定义服务中保持一个可变的。它足以让它更新到正确的状态，我们将轻松快速地获取这些信息。

我希望这可以帮助别人......

Angular 2：刷新

2 个答案: