如何使用Redux和React将经过身份验证的用户保存在状态

Question

我是Redux的新手，我真的没有太多时间花在研究上，所以如果你能帮我，我将不胜感激。因此，基本上我有一个React组件，在那里我通过向后端的HTTP请求来验证用户。当我得到响应时，我希望数据保存在Redux存储中，这样我就可以在其他组件/路由上访问它。这是怎么做到的？非常感谢。

这是我的组件：

class Register extends Component {
constructor(props) {
super(props);
this.state = {
errorMessage: null,
user: null
};
}
register = (event) => {
event.preventDefault();
console.log(event.target.email.value);
let errorMessage = null;
if (!event.target.name.value) errorMessage = 'Numele este obligatoriu.';
else if (!event.target.email.value)
errorMessage = 'Email-ul este obligatoriu.';
else {
const body = {
name: event.target.name.value,
email: event.target.email.value,
password: event.target.password.value,
confirmPassword: event.target.confirmPassword.value
};
return axios
.post('http://localhost:5000/api/v1/auth/register', body)
.then((response) => {
console.log(response);
this.setState({ // Instead of this, the user should be stored using Redux
user: response.data.data.user
});
})
.catch((error) => {
this.setState({ errorMessage: error.response.data.message });
});
}
this.setState({ errorMessage });
};
render() {
return (
<div className="register-page">
<form onSubmit={this.register}>
<h3>Cont nou</h3>
<input type="text" placeholder="Nume" name="name" />
<input type="text" placeholder="E-mail" name="email" />
<input type="password" placeholder="Parola" name="password" />
<input
type="password"
placeholder="Confirmă parola"
name="confirmPassword"
/>
<span className="error-message">{this.state.errorMessage}</span>
<input type="submit" value="Trimite" name="submit" />
</form>
</div>
);
}
}
export default Register;

Answer 1

如果需要保存用户的身份验证状态，最快的方法是使用useContext挂钩。

• 创建一个Authcontext.js文件，并定义上下文中的内容(但仅限于数据类型，您可以看到我们不需要在此处定义setIsAuthenticated

import React from 'react';
export default React.createContext({
isAuthenticated: false,
setIsAuthenticated: (value) => {},
});

• 在您的主要组件中，您现在可以用上下文包装整个应用程序。我们在这里定义了setIsAuthenticated函数和isAuthenticated的初始值

const App = () => {
const [isAuthenticated, setIsAuthenticated] = useState(AuthAPI.setupUser());

return (
<AuthContext.Provider value={{
isAuthenticated,
setIsAuthenticated
}}>
<AppContent />
</AuthContext.Provider>
);
};
ReactDOM.render(<App/>, document.getElementById('app'));
export default App;

例如，由于上下文是全局状态(作为redux(，您还可以从每个组件获取上下文。

import React, { useContext } from 'react';
const Logout = () => {
const { setIsAuthenticated } = useContext(AuthContext);
const logout = () => {
AuthAPI.logout();
setIsAuthenticated(false);
};
return(...)

为了确定用户是否连接，您必须构建自己的逻辑，但如果您使用的是jwt，setupUser可能是这样的。例如，每当应用程序开始为你的api调用设置axios并返回你的用户状态时，就会调用它。

function setupUser() {
// check if token exist
const token = window.localStorage.getItem('authToken');
if (token) {
const { exp: expirationDate } = jwtDecode(token);
if (expirationDate * 1000 > new Date().getTime()) {
axios.defaults.headers['Authorization'] = 'Bearer ' + token;
return true;
} 
} 
return false;
}