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
函数会抛出错误,并且整个应用程序崩溃 - 不理想。我可能是偏执狂,畸形的 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?如果我负责的话,我似乎应该这样做......
解决方案
我认为这不起作用,因为this.decoded
不可观察,因此 mobx 无法跟踪对其的更新以强制更新计算属性。
在所有mobx 示例中,它们都使用基于其他可观察值的计算属性。
因此,您的选择是使decoded
observable 或使用方法而不是计算属性。
class generalStore {
decoded = null;
constructor() {
try {
this.decoded = jwtdecode(localStorage.getItem('token'))
} catch(err) {
this.decoded = null
}
}
// ...
}
decorate(generalStore, {
decoded: observable,
// ...
});
推荐阅读
- angular - 连接链接的mongodb问题
- node.js - IBM Watson Assistant:如何使 Db2 的查询结果可下载为 CSV 文件?
- powershell - 如果对 Array 使用 -notlike 不起作用
- javafx - Gluon Mobile (JavaFX):无法执行目标 com.gluonhq:client-maven-plugin:0.1.38
- javascript - 为什么 Python 比 JavaScript 慢这么多?它能赶上吗?
- linux - Flutter for linux 构建失败
- jquery - 添加字段不会添加到 POST
- c - 为什么我在 xcode 上的 C 代码中有“期望表达式”?
- python - 如何将列中的数字映射到数据框中的字符串
- windows - Powershell - 在目录中创建目录表单文件