如何在我的 react.js 应用程序中刷新访问令牌

Question

我对反应和开发非常陌生，经验为 0。我有一个项目的截止日期很近，请大家帮帮我。

我不知道如何在我的 react 应用程序中刷新我的不记名令牌。我的整个代码如下。

const baseURL = 'https://management.azure.com/subscriptions/{{subID}}/resourceGroups/AzureRESTResourceGroup/resources?api-version=2021-04-01'


class App extends Component {

    constructor(props) {
        super(props)

        this.state = {
            items: [],
            loc: []
        }
    }


    componentDidMount() {
        const AuthStr = 'Bearer '.concat("eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1......");
        axios.get(baseURL, { headers: { Authorization: AuthStr } })
            .then(response => {

                const locArray = response.data.value.map(el => {
                    //console.log(el);
                    for (let i = 0; i < Data.length; i++) {
                        if (Data[i].name === el.location) {
                            //console.log("found")
                            //console.log(Data[i]);
                            return ({
                                name: el.name,
                                lat: Data[i].latitude,
                                long: Data[i].longitude
                            })
                        }
                    }
                    return {}
                })

                console.log(locArray);

                // If request is good...
                console.log(response.data.value);

                this.setState({
                    items: response.data.value,
                    loc: locArray
                })

            })
                //if responce has a error...
            .catch((error) => {
                console.log('error ' + error);
            })
    }

Answer 1

当你从服务器获取数据时，你也会在响应头中获取新的承载令牌，你可以做的事情是创建一个 axios 响应拦截器，在拦截器中你可以获取承载，然后将其保存到您的应用程序，并在您的请求拦截器处更新它：

这里是axios拦截器的基本使用：

let token = ''
// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    config.headers = {
      ...config.headers,
     Authorization:token 
    }
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    token = response.headers?.Authorization
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  });