我正在使用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感到担忧?好像我要负责...
答案 0 :(得分:1)
我认为这是行不通的,因为with open(filename, 'w') as outfile:
不可观察,因此mobx无法跟踪对其的更新以强制计算的属性进行更新。
在所有mobx examples中,他们都使用基于其他可观察值的计算属性。
因此,您的选择是使this.decoded
可见,或使用方法代替计算属性。
decoded