Проверка подлинности токена с помощью Ax ios в React - PullRequest
Новая
       54

Проверка подлинности токена с помощью Ax ios в React

0 голосов
/ 02 мая 2020

Я создал систему входа в React с помощью Ax ios, и она дает мне токен входа. Я сохранил этот токен для входа и ответ (LoginToken): (Login. js) 

export default class Login extends Component {
 state = {
      redirect: false,
      redirectHR:false,
      email: "",
      password: "",
      isLogin: false,
      loggedIn: false,
      returnedEmail: "",
      returnedFirstName:"",
      returnedLastName:"",
      returnedCompanyName:"",
      returnedCompanyCode:" ",
      LoginToken:" ",
    }
        axios.post('/api/auth/login/', data, {headers:headers, withCredentials:true}).then(
          res => {
            if(res.data != null){
              console.log(res.data);
              this.setState({
                loggedIn: true,
                returnedEmail: res.data.email,
                returnedFirstName: res.data.first_name,
                returnedLastName: res.data.last_name,
                returnedCompanyName: res.data.company_name,
                returnedCompanyCode: res.data.company_code,
                LoginToken: res.data.token,  
              })
              console.log(this.state.LoginToken);
            }else{
              console.log("failed to log in");
            }
          }
        ).catch(error => {
          console.error(error.response);

        })
      }
....

Теперь я хочу использовать этот LoginToken в качестве заголовка в другом компоненте (AdditionalInfo. js) что-то вроде: 

const headers = {
 'Authorization': 'Token your_Token'
}
export class AdditionalInfo extends Component {
  state = {
    locations:[],
  }

  componentDidMount() {
    axios.get('/api/jobs/list-locations/',{headers:headers, withCredentials:true}).then(res=>{
      console.log(res)
      this.setState({locations:res.data})
    })
  }

вместо your_token, это должен быть LoginToken, который я сохранил в другом компоненте. Я пытался использовать реквизит, но он не работал, и если я не добавляю этот заголовок, я получаю ошибку 401, и я не могу получить информацию от API. Как мне импортировать LoginToken в этот файл?

Ответы [ 2 ]

2 голосов
/ 02 мая 2020

Вы можете использовать localStorage Web Api для хранения токена и использовать его где угодно.

Сохраните его: - localStorage.setItem('LoginToken', res.data.token);

Получите его: - let loginToken = localStorage.getItem('LoginToken')

0 голосов
/ 02 мая 2020

Полагаю, что хороший сценарий будет, если вы не используете приставку, сохраняете ее на localStorage и переносите ее в разные компоненты. 

export default class Login extends Component {
 state = {
      redirect: false,
      redirectHR:false,
      email: "",
      password: "",
      isLogin: false,
      loggedIn: false,
      returnedEmail: "",
      returnedFirstName:"",
      returnedLastName:"",
      returnedCompanyName:"",
      returnedCompanyCode:" ",
      LoginToken:" ",
    }
        axios.post('/api/auth/login/', data, {headers:headers, withCredentials:true}).then(
          res => {
            if(res.data != null){
              console.log(res.data);
              // store the token in the localstorage
              window.localStorage.setItem("token", res.data.token);
              this.setState({
                loggedIn: true,
                returnedEmail: res.data.email,
                returnedFirstName: res.data.first_name,
                returnedLastName: res.data.last_name,
                returnedCompanyName: res.data.company_name,
                returnedCompanyCode: res.data.company_code,
                LoginToken: res.data.token,  
              })
              console.log(this.state.LoginToken);
            }else{
              console.log("failed to log in");
            }
          }
        ).catch(error => {
          console.error(error.response);

        })
      }
....

получаете токен в другом компоненте 

const headers = {
 'Authorization': `Token window.localStorage.getItem("token")`
}
export class AdditionalInfo extends Component {
  state = {
    locations:[],
  }

  componentDidMount() {
    axios.get('/api/jobs/list-locations/',{headers:headers, withCredentials:true}).then(res=>{
      console.log(res)
      this.setState({locations:res.data})
    })
  }

(или вы должны создать HO C для pu sh токена для реквизита.) 


export default withToken = (wrapperComponent) => {
   let token = window.localStorage.getItem("token");
   if(!token){
       // push to login
       this.props.history.push('/login');
   }else{
       <wrapperComponent token={token}>
   }
}

и с помощью ho c вы можете получить прямой доступ к токену в реквизите вашего компонента.

...