令牌过期后如何设置新令牌?

时间:2019-07-29 11:48:08

标签: javascript reactjs

我创建了函数getNewToken,在其中我基于refresh_token获取一个新令牌并将其设置为本地存储。在哪里检查Unauthorized 401错误并调用此函数this.getNewToken()

if (error.status === 401) {
     this.getNewToken ();
}

axios.defaults.baseURL = localStorage.getItem('domain');

class App extends Component {

  constructor (props) {
    super(props);
    this.state = {
      items: []
    }
  }

  componentDidMount() { 
    axios.defaults.baseURL = localStorage.getItem('domain');

    axios({
        url: "/api/v1/items",
        method: "GET"
        headers: {
          'Authorization': `Bearer ${token}`
        }
    })
    .then(response => {
        console.log(response.data)
        this.setState({
          items: response.data,
        });
    })
    .catch(error => {
        if(error.status === 401) {
            console.log(error.status);

            this.getNewToken();
        }
    })
  }

  getNewToken = () => {
    axios.defaults.baseURL = localStorage.getItem('domain');
    const url = '/api/refresh_token';

    const data = qs.stringify({
      grant_type: 'refresh_token',
      client_secret: ****,
      client_id: ****,
      refresh_token: ****
    });

    const config = {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }

    axios({ 
       method: 'post', 
       url, 
       data, 
       config
    }) 
    .then(res => { 
        if (res.status === 200) {
          localStorage.setItem('token', JSON.stringify(res.data))
          this.setState({
            token: res.data
          })

        } 
      }).catch(err => { 
        console.error(err);
      });
  }

  render () {
    return (
      <div>

      </div>
    )
  }
}

0 个答案:

没有答案