Question

我试图在应用程序启动时将 jwt 令牌存储在本地存储中，但即使在将令牌存储在本地存储中之前，渲染方法也会被调用。您能否帮助 componentWillMount 等待令牌存储在本地存储中？

Index.js

 componentWillMount() {        
            AuthRepository.getToekn();
        }

AuthRepository.js

class AuthRepository {
    constructor(callback) {
        this.callback = callback;
    }
       
    async getToekn() {   
        const reponse = await axios
            .post(`${baseUrl}/auth/local`, {                
                identifier:(process.env.IDENTIFIER).trim(),
                password:(process.env.IDENTIFIER_PWD).trim(),
            })
            .then((response) => {                   
                setTrapiToken(response.data.jwt)            
                return response.data.jwt;
            })
            .catch((error) => ({ error: JSON.stringify(error) }));
        return reponse;
    }
}
export default new AuthRepository();

设置令牌的功能

export const setTrapiToken = (token) => {
    console.log('here')
    console.log(token)
    try{
      localStorage.setItem(process.env.JWT_KEY,token); 
      return true;     
    }catch(e){
        console.log('false')
      return false;
    }
  };

Answer 1

React 的渲染从不等待——因此挂载也从不等待。无论您喜欢与否，都会安装该组件。因此，您所能做的就是检查数据是否已经就位，如果还没有，则显示某种加载指示器。

如何使 componentWillMount 等待令牌存储在本地存储中

1 个答案: