在React中访问哈希参数（/callback#token=1234&...etc）

Question

我正在尝试使用密码授予从API提取Oauth令牌。当我重定向回/ callback时，React正在将？.. query转换/重定向为＃.. query：

例如：

http://localhost:3000/callback#access_token=eyJ0eXAiOi...&token_type=Bearer&expires_in=31535999

然后如何在组件中访问这些参数？我可以看到props.location.hash中存在哈希参数字符串的完整值...我应该将字符串切成薄片，还是有React的方法？

Answer 1

尝试query-string：

import queryString from 'query-string';

queryString.parse(props.location.hash)

// { access_token: '...', token_type: '...' }

也有类似的软件包：querystring，qs。

Answer 2

我建议使用类似此功能的smth来从props.location.hash获取对象：

const getJsonFromUrl = str => {
  const query = str.substr(1);
  const result = {};

  query.split('&').forEach(function(part) {
    const item = part.split('=');
    result[item[0]] = decodeURIComponent(item[1]);
  });

  return result;
};

const { access_token, token_type } = getJsonFromUrl(props.location.hash);

Answer 3

最简便的方法：

let params = new URLSearchParams(window.location.hash);
let token = params.get('access_token');