Javascript 在React中使用Axios进行令牌身份验证

我在React with Axios中创建了一个登录系统，它给了我一个登录令牌。我已保存此登录令牌和响应（LoginToken）：（login.js）

现在我想在另一个组件（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，而不是您的_令牌。我试图使用道具，但它没有工作，如果我不添加这个标题，我会收到一个401错误，我无法从api接收信息。如何在该文件中导入LoginToken？

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

存储它：-

localStorage.setItem（'LoginToken'，res.data.token）

检索它：-
让loginToken=localStorage.getItem（'loginToken'）
您可以使用localStorage Web Api存储令牌并在任何地方使用它

存储它：-
localStorage.setItem（'LoginToken'，res.data.token）

检索它：-
让loginToken=localStorage.getItem（'loginToken'）
我想如果您不使用redux，将其存储在
localStorage
上并跨不同的组件获取，将是一个好的方案

导出默认类登录扩展组件{
状态={
重定向：false，
HR：错，
电邮：“，
密码：“”，
伊斯洛金：错，
洛格丁：错，
已退回邮件：“”，
returnedFirstName:“”，
returnedLastName:“”，
returnedCompanyName:“”，
返回的公司代码：“”，
罗金托肯：“，
}
post（'/api/auth/login/'，data，{headers:headers，withCredentials:true}）(
res=>{
if（res.data！=null）{
console.log（res.data）；
//将令牌存储在localstorage中
setItem（“token”，res.data.token）；
这是我的国家({
洛格丁：没错，
返回邮件：res.data.email，
returnedFirstName:res.data.first_name，
returnedLastName:res.data.last_name，
returnedCompanyName:res.data.company\u name，
返回的公司代码：res.data.company\u代码，
LoginToken:res.data.token，
})
console.log（this.state.LoginToken）；
}否则{
console.log（“登录失败”）；
}
}
).catch（错误=>{
console.error（error.response）；
})
}
....

正在其他组件中获取令牌

const头={
'Authorization'：`Token window.localStorage.getItem（“Token”）`
}
导出类AdditionalInfo扩展组件{
状态={
地点：[]，
}
componentDidMount（）{
get（'/api/jobs/list locations/'，{headers:headers，withCredentials:true}）{
console.log（res）
this.setState（{locations:res.data}）
})
}

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


导出默认值withToken=（wrapperComponent）=>{
让token=window.localStorage.getItem（“token”）；
如果（！令牌）{
//推送登录
this.props.history.push（'/login'）；
}否则{
}
}

通过使用hoc，您可以直接访问组件道具中的令牌。
我想如果您不使用redux，将其存储在
localStorage
上，并跨不同的组件获取它，将是一个好的场景

导出默认类登录扩展组件{
状态={
重定向：false，
HR：错，
电邮：“，
密码：“”，
伊斯洛金：错，
洛格丁：错，
已退回邮件：“”，
returnedFirstName:“”，
returnedLastName:“”，
returnedCompanyName:“”，
返回的公司代码：“”，
罗金托肯：“，
}
post（'/api/auth/login/'，data，{headers:headers，withCredentials:true}）(
res=>{
if（res.data！=null）{
console.log（res.data）；
//将令牌存储在localstorage中
setItem（“token”，res.data.token）；
这是我的国家({
洛格丁：没错，
返回邮件：res.data.email，
returnedFirstName:res.data.first_name，
returnedLastName:res.data.last_name，
returnedCompanyName:res.data.company\u name，
返回的公司代码：res.data.company\u代码，
LoginToken:res.data.token，
})
console.log（this.state.LoginToken）；
}否则{
console.log（“登录失败”）；
}
}
).catch（错误=>{
console.error（error.response）；
})
}
....

正在其他组件中获取令牌

const头={
'Authorization'：`Token window.localStorage.getItem（“Token”）`
}
导出类AdditionalInfo扩展组件{
状态={
地点：[]，
}
componentDidMount（）{
get（'/api/jobs/list locations/'，{headers:headers，withCredentials:true}）{
console.log（res）
this.setState（{locations:res.data}）
})
}

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


导出默认值withToken=（wrapperComponent）=>{
让token=window.localStorage.getItem（“token”）；
如果（！令牌）{
//推送登录
this.props.history.push（'/login'）；
}否则{
}
}

通过使用hoc，您可以直接访问组件道具中的令牌。
您可以将令牌存储在
localStorage
上，以便在所有组件中使用它。您还可以查看redux：您可以将令牌存储在
localStorage
上，以便在所有组件中使用它。您还可以查看redux：
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})
    })
  }