在 React 中使用 Axios 进行令牌认证答案

【问题标题】：Token Authentication with Axios in React在 React 中使用 Axios 进行令牌认证
【发布时间】：2020-05-02 18:20:42
【问题描述】：

我用 Axios 在 React 中创建了一个登录系统，它给了我一个登录令牌。我已保存此登录令牌和响应 (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})
    })
  }

应该是我保存在其他组件中的 LoginToken 而不是 your_token。我尝试使用道具，但它不起作用，如果我不添加此标头，我会收到 401 错误，并且我无法从 api 接收信息。我应该如何在这个文件中导入 LoginToken？

【问题讨论】：

您可以将令牌存储在localStorage 上，以便在所有组件中使用它。
你也可以看看redux：redux.js.org/basics/usage-with-react

标签： javascript reactjs axios token http-token-authentication

【解决方案1】：

您可以使用 localStorage Web Api 来存储令牌并在任何地方使用它。

存储它：- localStorage.setItem('LoginToken', res.data.token);

检索它：- let loginToken = localStorage.getItem('LoginToken')

【讨论】：

【解决方案2】：

我想如果你不使用 redux 的话，最好的情况是，将它存储在 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})
    })
  }

（或者你应该创建一个 HOC 来将令牌推送到道具。）


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

通过使用 hoc，您可以直接在组件的 props 中访问令牌。

【讨论】：