Ember.js 5.4：Session Store更新时同步组件变量的方法

环境 #

Ember.js Octane（JavaScript，非TypeScript）

问题场景 #

使用SessionManager服务操作session store时，添加或移除指定密钥后，顶层application-shell组件无法自动切换导航栏的显示状态。目前只有手动刷新页面（F5），组件才能感知到store的变化，需要实现调用setAuthenticationToken(value)时组件自动更新。

现有代码 #

application-shell 模板与组件 #

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

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
    @tracked isAuthenticated = this.SessionManager.isAuthenticated
}

SessionManager 服务 #

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

    @tracked isAuthenticated = this.getAuthenticationToken()
    
    delAuthenticationToken()     {        this.delItem(SessionId_Key)        }
    getAuthenticationToken()     { return this.getItem(SessionId_Key)        }
    setAuthenticationToken(value){        this.setItem(SessionId_Key, value) }

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

解决方法 #

在SessionManager服务的令牌操作方法中，直接更新isAuthenticated的跟踪状态，触发组件的自动更新：

delAuthenticationToken() {        
  this.delItem(SessionId_Key);
  this.isAuthenticated = false;      
}

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

原代码中isAuthenticated仅在服务初始化时从sessionStorage取值，后续操作sessionStorage时没有更新这个跟踪属性，导致组件无法感知变化。通过在令牌操作方法中直接设置isAuthenticated，利用Ember的跟踪机制自动触发组件重渲染，实现导航栏状态的实时切换。

内容的提问来源于Stack Exchange，提问作者Display name