请问一下React Router 访问的时候 Refere 带上Hmac和其他参数

Question

React Router 验证 Authorization
不使用 React Router 点击链接a标签 referer 会自动带上：Hmac还有一些参数。
使用了 React Router 就没办法访问网页因为没有 Hmac和参数
请问一下 有谁知道怎么解决吗？？ 麻烦告知一下 非常感谢

以下是不使用 React Router 点击后链接的请求 请注意Referer 是带了hmac和一些参数

GET /influencer/create HTTP/2
Host: app.demo.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:89.0) Gecko/20100101 Firefox/89.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Language: zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Referer: https://app.demo.com/?hmac=f5ce7446f696ab16868c285d835228ae08d793f42f8b2cd9abfa9bf60e501dc9&host=d2VsaW50by5teXNob3BpZnkuY29tL2FkbWlu&locale=en-US&new_design_language=true&session=f56f8ed35b35e7a06d017743b1b5dba496c9d932c87eeef4095aae630625f5336a&shop=demo.myshopify.com&timestamp=1623278997
Cookie: itp=eyJpdiI6ImtkTmQvKzZjS3pYVFB33xYmZQK2tJY3c9PSIsInZhbHVlIjoiTTlKY24yQVJqK1VFRm1XZUlabVBDeXh2QzBXNlBLaVFFZzVqZXNWaHRzbzdwMCt6aTZGaERTRzlJdlVueCtqNCIsIm1hYyI6IjI5YWY4NzQzZDI3ZGJhN2U3NzI2ZjM2Y2IwZTQ1ODk3YzMyYjg1YzRmMzg5NjU2NGE3ODk1NWJjNjZjYTBmYWEifQ%3D%3D; shopOrigin=demo.myshopify.com
Upgrade-Insecure-Requests: 1
TE: Trailers

以下是使用 React Router 点击后链接的请求 请注意 Referer 不带hmac和一些参数

GET /influencer/create HTTP/2
Host: app.demo.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:89.0) Gecko/20100101 Firefox/89.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Language: zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Referer: https://app.demo.com/influencer
Cookie: itp=eyJpdiI6ImtkTmQvKzZjS3pYVFBxYmZQK2tJY3c9PSIsInZhbHVlIjoiTTlKY24yQVJqK1VFRm1XZUlabVBDeXh2QzBXNlBLaVFFZzVqZXNWaHRzbzdwMCt6aTZGaERTRzlJdlVueCtqNCIsIm1hYyI6IjI5YWY4NzQzZDI3ZGJhN2U3NzI2ZjM2Y2IwZTQ1ODk3YzMyYjg1YzRmMzg5NjU2NGE3ODk1NWJjNjZjYTBmYWEifQ%3D%3D; shopOrigin=demo.myshopify.com
Upgrade-Insecure-Requests: 1
TE: Trailers

Router文件

export const RouterApp = () => {
    return (
        <Router>
            <Routes>
                <Route path="/influencer" element={<Home />} />
                <Route
                    path="/influencer/create"
                    element={<InfluencersCreacte />}
                />
                <Route
                    path="/influencer/:influencer"
                    element={<Influencers />} //没办法正常访问
                />
                <Route
                    path="/influencer/:influencer/edit"
                    element={<InfluencersEdit />} //没办法正常访问
                />
                <Navigate to={'/influencer'} />
                <Route path="/settings" element={<Settings />} />
                <Route path="/settings/proxy" element={<SettingsPoxy />} />
            </Routes>
        </Router>
    );
};

我使用了react-router": "^6.0.0-beta.0"
package.json

    "@shopify/app-bridge-react": "^1.30.0",
    "@shopify/app-bridge-utils": "^2.0.2",
    "@shopify/polaris": "^6.3.0",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.3",
    "history": "^5.0.0",
    "js-cookie": "^2.2.1",
    "qs": "^6.10.1",
    "react-helmet": "^6.1.0",
    "react-query": "^3.15.2",
    "react-query-devtools": "^3.0.0-beta.1",
    "react-router": "^6.0.0-beta.0",
    "react-router-dom": "^6.0.0-beta.0"

Answer 1

你index.html head里面添加下面 meta 试试：
<meta name="referrer" content="unsafe-url">