Мне нужно проверить, когда пользователь longin (использует fetch API), если role == "admin" или "user", использует токен. если role == "admin", то, например, сделать перенаправление на / account, в противном случае, если это "пользователь", тогда скрыть форму аутентификации в render и сделать анимацию (css / js) на странице, если есть возможность скрыть другие вещи. когда это простой пользователь, а не администратор.
Это мой код. Вот результат хорошей аутентификации администратора, токен здесь "result":
{
"success": true,
"message": "SUCCESS",
"result": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhY2NvdW50IjpbeyJkYXRlQ3JlYXRpb24iOiIyMDE5LTEwLTI0VDEwOjMyOjMwLjczMFoiLCJyZXNldHBhc3N3b3JkdG9rZW4iOm51bGwsInJlc2V0cGFzc3dvcmRleHBpcmVzIjpudWxsLCJyb2xlIjoiYWRtaW4iLCJlbmFibGUiOnRydWUsIl9pZCI6IjVkYjE3Zjg2M2ZhZjNmMTE1NDQ3OWVlNiIsImVtYWlsIjoic2FhcmFhYWFjaGVtbGFsQGdtYWlsLmNvbSIsInBhc3N3b3JkIjoiJDJiJDEwJGxGSUpKQVBXUmVaZ0MvTWpEaGJuSGVjUzdGb3d3QTlUU2pMTlRmVXdRWEpQdlgwTmhDTXd1IiwidGlja2V0cyI6W10sImdhaW5zIjpbXSwiX192IjowLCJub20iOiJBQ0hFTUxBTF8iLCJwcmVub20iOiJNRVJZRU1fIiwidGVsIjoiMDYxOTU2MjcyMSJ9XSwiaWF0IjoxNTcyMDQzOTUyfQ.ZuNdWcWfu-J_dvgCmUH_w8EAx4FIeSMvAqG8ebm1ilc"
}
Auth ofПростой пользователь такой же, есть только токен, который изменяется. У меня есть API выборки для входа в систему:
constructor (props) {
super(props);
this.state = {
cnx_mail: '',
cnx_pwd: '',
items: [],
token : '',
errors: {},
formErrors: {cnx_mail: '', cnx_pwd: ''},
emailValid: false,
passwordValid: false,
formValid: false
}
this.handleUserInput = this.handleUserInput.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit = (event) => {
event.preventDefault();
fetch(`${API}/api/connexion`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify ({
email: this.state.cnx_mail,
password: this.state.cnx_pwd,
})
})
.then(res => res.json())
.then(json => {
console.log(json);
localStorage.setItem('toktok', json.result);
// Redirect here if Admin this.props.history.push('/accounts'); Else hide the authentication form in render()
});
}
Моя форма авторизации в render ()> скрывает ее, когда роль == пользователь:
<form className="demoForm" onSubmit={this.handleSubmit} noValidate encType="application/x-www-form-urlencoded">
<div className="alreadysubscribed-input">
<div className={`alreadysubscribed-field group-input ${this.errorClass(this.state.formErrors.cnx_mail)}`}>
<input type="email" required className="form-control fatb-input input-form" name="cnx_mail"
value={this.state.cnx_mail}
id="cnx_mail"
onChange={this.handleUserInput} error={errors.cnx_mail} />
<label className="fatb-label" htmlFor="cnx_mail">Email</label>
<div className="fatb-bar"></div>
</div>
<div className={`alreadysubscribed-field group-input ${this.errorClass(this.state.formErrors.cnx_pwd)}`}>
<input type="password" required className="form-control fatb-input input-form" name="cnx_pwd"
value={this.state.cnx_pwd}
id="cnx_pwd"
onChange={this.handleUserInput} error={errors.cnx_pwd} />
<label className="fatb-label" htmlFor="cnx_pwd">Mot de passe</label>
<div className="fatb-bar"></div>
</div>
</div>
<FormErrors formErrors={this.state.formErrors} />
<div className="btn-cnx">
{/* <span className="mas">Se connecter</span> */}
<button className="fatb-btn bubbly-button btn-anim3 w100p" type="submit" name="cnx_btn" disabled={!this.state.formValid}>se connecter</button>
</div>
</form>