Javascript Mobx强制更新计算值

我正在使用Mobx处理我的React应用程序中的一些状态

我的应用程序使用JWT进行身份验证。通过令牌和刷新令牌

我已经建立了一家商店，并按如下方式运作：

class generalStore {
    isLoggedIn = localStorage.getItem('token') !== null ? true : false;
    name = localStorage.getItem('token') !== null ? jwtdecode(localStorage.getItem('token')).name : null;
    role = localStorage.getItem('token') !== null ? jwtdecode(localStorage.getItem('token')).role : null;

    login(name, role) {
        this.isLoggedIn = true;
        this.name = name;
        this.role = role;
    }

    logout() {
        this.isLoggedIn = false;
        this.name = null;
        this.role = null;
    }
}

decorate(generalStore, {
    isLoggedIn: observable,
    name: observable,
    role: observable,
    login: action,
    logout: action
})

const store = new generalStore()

当在应用程序中的其他位置调用登录/注销时，这将按预期工作

但是，如果JWT格式不正确（通过开发控制台手动），则

jwtdecode

函数会抛出错误，整个应用程序会崩溃-这并不理想。我可能是偏执狂，畸形的JWTs不应该在野外经常发生，但我喜欢强壮

然后我想我可以使用计算值来缓解这种情况：

class generalStore {
    constructor() {
        try {
            this.decoded = jwtdecode(localStorage.getItem('token'))
        } catch(err) {
            this.decoded = null
        }
    }

    get isLoggedIn() {
        if (this.decoded) {
            return true
        } else {
            return false
        }
    }


    get name() {
        if (this.decoded) {
            return this.decoded.name
        } else {
            return false
        }
    }

    get role() {
        if (this.decoded) {
            return this.decoded.role
        } else {
            return false
        }
    }
}

decorate(generalStore, {
    isLoggedIn: computed,
    name: computed,
    role: computed,
})

但是，当本地存储在登录时使用新令牌更新时，计算值不会自动更新，在计算值反映当前令牌之前，必须刷新应用程序（因此也要刷新存储）

有没有办法强制更新计算值？或者我可以处理

jwtdecode

在定义存储中的可观察对象时抛出的错误（第一个代码块）

---

还是不应该担心格式不正确的JWT？如果我是负责人，我可能应该这样做…

我认为这不起作用，因为

this.decoded

不可见，因此mobx无法跟踪对它的更新以强制更新计算属性

在所有情况下，它们都使用基于其他可观察值的计算属性

因此，您的选项是使

解码的

可见，或者使用方法而不是计算属性

class generalStore {

    decoded = null;

    constructor() {
        try {
            this.decoded = jwtdecode(localStorage.getItem('token'))
        } catch(err) {
            this.decoded = null
        }
    }

    // ...
}

decorate(generalStore, {
    decoded: observable,
    // ...
});

---

我无法确定如何将

解码的
定义为构造函数中的可观察项，或者在构造函数之外使用try/catch块来减轻格式错误的JWT。@BML91查看示例，有一个类
Person
，具有一些类属性，然后在下面它们被标记为可观察的，这就是我定义类的方式-因为我没有使用装饰器。这些示例都没有说明如何在构造函数之外执行try/catch observable，或者如何使用try/catch块定义observable？