这里是我的App.js
import React, { useEffect } from "react";
import { NavigationContainer } from "@react-navigation/native";
import AuthStore from "./src/stores/AuthStore";
import AuthStackNavigator from "./src/navigation/AuthStackNavigator";
import UnAuthStackNavigator from "./src/navigation/UnAuthStackNavigator";
const App = () => {
useEffect(() => {
console.log("APP JS", AuthStore.userAuthenticated);
}, [AuthStore.userAuthenticated]);
return <NavigationContainer>
{AuthStore.userAuthenticated ? <AuthStackNavigator /> : <UnAuthStackNavigator />}
</NavigationContainer>;
};
export default App;
userAuthenticated的AuthStore值在自动登录或登录时计算和更新。
此处为AuthStore.js
import { userLogin, userRegister } from "../api/AuthAgent";
import { clearStorage, retrieveUserSession, storeUserSession } from "../utils/EncryptedStorage";
import { Alert } from "react-native";
import { computed, makeObservable, observable } from "mobx";
import { setBearerToken } from "../config/HttpClient";
class AuthStore {
user = {};
token = undefined;
refreshToken = undefined;
decodedToken = undefined;
constructor() {
makeObservable(this, {
token: observable,
refreshToken: observable,
user: observable,
decodedToken: observable,
userAuthenticated: computed,
});
this.autoLogin();
}
async doLogin(body) {
const resp = await userLogin(body);
console.log("AuthStore > userLogin > resp => ", resp);
if (resp.success) {
this.decodedToken = await this.getDecodedToken(resp.token);
this.setUserData(resp);
storeUserSession(resp);
} else {
Alert.alert(
"Wrong credentials!",
"Please, make sure that your email & password are correct",
);
}
}
async autoLogin() {
const user = await retrieveUserSession();
if (user) {
this.setUserData(user);
}
}
setUserData(data) {
this.user = data;
this.token = data.token;
setBearerToken(data.token);
}
get userAuthenticated() {
console.log('AuthStore > MOBX - COMPUTED userAuthenticated', this.user);
if (this.token) {
return true;
} else return false;
}
async logout() {
await clearStorage();
this.user = undefined;
this.token = undefined;
this.refreshToken = undefined;
this.decodedToken = undefined;
}
}
export default new AuthStore();
主要问题是AuthStore.userAuthenticated值即使在AuthStore上更改,也不会由App.js的useEffect触发。因此,当我登录或注销时,我必须重新加载应用程序以触发useEffect钩子,然后只更新导航器。
2条答案
按热度按时间gijlo24d1#
您可以使用
useMemo
钩子来实现这一点。AuthContext.ts
现在你可以在任何文件中使用这个函数,如下所示:
disho6za2#
如果您的主要目的是在堆栈中导航和导航,无论身份验证是否可用,那么asynstorage是您必须首先存储令牌的最佳选择。
(“userAuthenticated”是我们获取值的键)
现在转到您希望此令牌运行车削条件的屏幕
现在使用状态中的令牌,然后运行条件: