Mobx强制更新计算值

时间:2018-10-19 13:32:41

标签: javascript reactjs jwt 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函数会抛出错误,并且整个应用程序都会崩溃-不理想。我可能是偏执狂,畸形的JWT不应在野外经常发生,但我喜欢健壮。

然后我认为我可以使用计算值来缓解这种情况:

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感到担忧?好像我要负责...

1 个答案:

答案 0 :(得分:1)

我认为这是行不通的,因为with open(filename, 'w') as outfile: 不可观察,因此mobx无法跟踪对其的更新以强制计算的属性进行更新。

在所有mobx examples中,他们都使用基于其他可观察值的计算属性。

因此,您的选择是使this.decoded可见,或使用方法代替计算属性。

decoded