Hej, jestem początkujący w react. Zrobiłem sobie backend od strony springa i wszystko śmiga. Tak samo logowanie i wylogowywanie od strony reacta itd.
Chciałbym aby dostęp do strony miały tylko osoby z określonym uprawnieniem i zalogowane. Wszystko niby zrobiłem, ale niestety żeby przejść do strony muszę kliknąć 2 razy link, gdyż zanim zmienię zmienną czy uzytkownik jest autoryzowany to już wykonuje się render.
Prosiłbym o pomoc jak najpierw odwołać się do backendu, ustawić zmienną i dopiero wykonać render. Takie coś nie działa
class RegisterComponent extends Component {
//Tutaj sprawdzam czy użytkownik jest zautoryzowany aby wyświetlić ten komponent
componentDidMount() {
this.checkAuthorizationStatus();
// Auto initialize all the things!
M.AutoInit();
}
//Sprawdzam czy jest zautoryzowany i jaką ma role
checkAuthorizationStatus(){
axios.get(API_URL+`/logged_in`)
.then(response=>{
if(response.data.authenticated === true && response.data.principal.authorities[0].authority===`ROLE_ADMIN`){
this.state.authorized = true;
}
else{
this.state.authorized=false;
}
})
}
constructor(props) {
super(props)
this.state = {
username: '',
password: '',
role : 'ROLE_ADMIN',
hasCreationFailed: false,
showSuccessMessage: false,
authorized : false
}
}
handleChange = (event) => {
this.setState(
{
[event.target.name]: event.target.value
}
)
}
submitClicked = () => {
console.log({login: this.state.username,
password: this.state.password,
roles: [{"role":this.state.role}]})
axios.post(API_URL + '/admin/register', {
login: this.state.username,
password: this.state.password,
roles: [{"role":this.state.role}]
})
.then((response) => {
this.setState({
showSuccessMessage: true,
hasCreationFailed: false
}
)
console.log(response)
})
.catch((error) => {
this.setState({
showSuccessMessage: false,
hasCreationFailed: true
})
console.log(error)
})
}
render() {
if(this.state.authorized===true){
return (
<div className="row container">
<div className="col s10 offset-s1 l4 offset-l4">
<div className="purple-text accent-2"><h5>Create New Account</h5></div>
<div className="input-field">
<select value={this.state.role} onChange={this.handleChange} name="role">
<option value='ROLE_ADMIN'>Administrator</option>
<option value='ROLE_TABLE'>Klient</option>
<option value='ROLE_WORKER'>Pracownik</option>
</select>
</div>
<div className="input-field">
<input className="validate" type="text" id="username" name="username"
value={this.state.username} onChange={this.handleChange}/>
<label htmlFor="username">Username</label>
</div>
<div className="input-field">
<label htmlFor="password">Password</label>
<input type="password" id="password" name="password" value={this.state.password}
onChange={this.handleChange}/>
</div>
<button className="btn blue col l12 waves-effect waves-light"
onClick={this.submitClicked}>Zarejestruj użytkownika
</button>
{this.state.showSuccessMessage &&
<div className="green-text">Rejestracja zakończona powodzeniem</div>}
{this.state.hasCreationFailed && <div className="red-text">Rejestracja nie powiodła się</div>}
</div>
</div>
)
}else return (<></>)
}
}
export default RegisterComponent
Próbowałem jeszcze tego, ale tutaj znowu nie ustawia tej zmiennej przed ifem nie wiem czemu...
class AuthenticatedRoute extends Component {
constructor(props) {
super(props)
this.state = {
authorized: false
}
}
checkAuthorizationStatus(){
axios.get(API_URL+`/logged_in`)
.then(response=>{
if(response.data.authenticated === true && response.data.principal.authorities[0].authority===`ROLE_ADMIN`){
this.state.authorized = true;
}
else{
this.state.authorized=false;
}
})
}
render() {
this.checkAuthorizationStatus();
console.log(this.state.authorized)
if (this.state.authorized===true) {
return <Route {...this.props} />
} else {
return <Redirect to="/login" />
}
}
}
export default AuthenticatedRoute
React