Quantcast
Viewing latest article 3
Browse Latest Browse All 3

Cheking if "admin" or "user" using fetch in reactjs

i need to verify when the user longin (using fetch API) if role == "admin" or "user" using token. if role == "admin" then make a redirection to /accounts for example, otherwise if it's a "user" then hide the authentication form in render and make some animation (css / js) on the page if it's possible to hide other things when it's a simple user and not an Admin.

This is my code Here is the result of a good Admin auth, the token here is "result" :

{
    "success": true,
    "message": "SUCCESS",
    "result": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhY2NvdW50IjpbeyJkYXRlQ3JlYXRpb24iOiIyMDE5LTEwLTI0VDEwOjMyOjMwLjczMFoiLCJyZXNldHBhc3N3b3JkdG9rZW4iOm51bGwsInJlc2V0cGFzc3dvcmRleHBpcmVzIjpudWxsLCJyb2xlIjoiYWRtaW4iLCJlbmFibGUiOnRydWUsIl9pZCI6IjVkYjE3Zjg2M2ZhZjNmMTE1NDQ3OWVlNiIsImVtYWlsIjoic2FhcmFhYWFjaGVtbGFsQGdtYWlsLmNvbSIsInBhc3N3b3JkIjoiJDJiJDEwJGxGSUpKQVBXUmVaZ0MvTWpEaGJuSGVjUzdGb3d3QTlUU2pMTlRmVXdRWEpQdlgwTmhDTXd1IiwidGlja2V0cyI6W10sImdhaW5zIjpbXSwiX192IjowLCJub20iOiJBQ0hFTUxBTF8iLCJwcmVub20iOiJNRVJZRU1fIiwidGVsIjoiMDYxOTU2MjcyMSJ9XSwiaWF0IjoxNTcyMDQzOTUyfQ.ZuNdWcWfu-J_dvgCmUH_w8EAx4FIeSMvAqG8ebm1ilc"
}

The auth of simple User is the same, there is only the token that changes There is my fetch API for login :

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()      

    }); 
  }

My auth form in render() > hide it when role == user:

<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>

Viewing latest article 3
Browse Latest Browse All 3

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>