Javascript Ember.js 5.4更新会话存储时如何更新组件变量

isAuthenticated只设置一次

    @tracked isAuthenticated = this.SessionManager.isAuthenticated

这意味着，变量isAuthenticated是用来自会话管理器的值来初始化的(不是那个值，isAuthated总是在=的右侧表示值(因为赋值只发生一次)).

要使其具有react 性，您需要将其转换为Gatter.

get isAuthenticated() {
  return this.SessionManager.isAuthenticated;
}

otherwise，如果你想保持@tracked isAuthenticated，你的一个函数需要设置这个值.

在这两种情况下，您的模板

{{#if this.isAuthenticated}}
  <nav class="mt-8">...</nav>
{{/if}

然后会按预期进行更新

您的整体代码将如下所示:

应用程序shell HBS

{{#if this.isAuthenticated}}
  <nav class="mt-8">...</nav>
{{/if}

应用程序shell 程序js

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking'
import { inject as service } from '@ember/service';

export default class ApplicationShellComponent extends Component {
    @service SessionManager

    get isAuthenticated() {
        return this.SessionManager.isAuthenticated;
    }
}

服务:

const SessionId_Key = 'SIDK'
export default class SessionManagerService extends Service {

    @tracked isAuthenticated = this.getAuthenticationToken()
    
    delAuthenticationToken() {        
      this.delItem(SessionId_Key);
      this.isAuthenticated = false;      
    }
    
    getAuthenticationToken() { 
        return this.getItem(SessionId_Key);
    }

    setAuthenticationToken(value) {
        this.setItem(SessionId_Key, value);
        this.isAuthenticated = true;
    }

    delItem(key)        {
        sessionStorage.clear(key);        
    }

    getItem(key)        { 
        return sessionStorage.getItem(key);        
    }
    setItem(key, value) {        
        sessionStorage.setItem(key, value);
    }
}