如何在内存中正确存储访问令牌反应

Question

我正在寻找一种干净的方式来将我的访问令牌存储在 React 中。

• 第一件事：我不想使用本地存储。我不需要使我的访问令牌持久化，因为我可以随时刷新它。
• 我还排除了一个 cookie，因为我想防止 CSRF 攻击。通过只将访问令牌存储在内存中，实际上需要加载页面才能获取令牌并验证请求（刷新令牌只能用于刷新）
• 我曾想过使用 redux/context，但是，调用 API 的函数不是组件的子组件，因此我无法从中访问令牌。此外，我不想将令牌作为参数传递，因为我想保持 HTTP 逻辑的解耦。也许有一种干净的方式来使用它？

经过一番研究，我发现使用全局变量是一种有效的“作弊”来获得我想要的东西。但是，我猜测是否有更清晰的方法可以获得相同的结果。

//token.js

const access_token= "";

export const setAccessToken(token){
 access_token=token;
}

export const getAccessToken(){
 return access_token;
}

//NOTICE:
// -ON LOGIN/REFRESH: I set the access token
// -ON API CALLS: I get the access token and I add it to the header

api.js

const baseURL= "http://my_base_url";

const generateApiInterface = ()=>{
    let headers : any= {
       
    };
    
    token=getAccessToken(); //HERE I NEED TO RETRIEVE MY ACCESS TOKEN

    if(token){
        headers={
            'Authorization': 'Token '+ token,
            ...headers //append other basic proprieties
        }
    }

    return axios.create({
        baseURL: baseURL,
        headers: headers
    });
}

const api = generateApiInterface();

Answer 1

您的操作方式最好将任何内容保存在内存中。如果这是服务器端，那么您需要确保在完成后删除令牌，但如果不是，那么当前方法是可取的。请注意，您使用的是const，您希望将其更改为let。另一个想法是使用会话存储，但这带来了 XSS 的想法。

然而，React 提供了一种拥有“全局”状态的方法——这将是使用提供者和上下文。这是一个例子：

// provider.tsx

import React, { useContext, createContext, FC, useState } from 'react'

type AccessTokenContext = [string, React.Dispatch<React.SetStateAction<string>>]

const AccessTokenProvider: FC = (props) => {
    const [accessToken, setAccessToken] = useState<string>(null)
    return <AccessToken.Provider value={[accessToken, setAccessToken]} {...props} />
}

const AccessToken = createContext<AccessTokenContext>(null)

const useAccessToken = (): AccessTokenContext => useContext<AccessTokenContext>(AccessToken)

export { AccessTokenProvider, useAccessToken }

您必须将您的应用容器包装在AccessTokenProvider：

// index.tsx

import React from 'react'
import ReactDOM from 'react-dom'

import './index.css'

import App from './App'
import { AccessTokenProvider } from './providers/AccessTokenProvider'

ReactDOM.render(
    <AccessTokenProvider>
        <App />
    </AccessTokenProvider>,
    document.getElementById('app')
)

然后您可以在App 和App 的任何子代中使用挂钩useAccessToken。当然，这个提供者不必是根级别的，但是在这里包含它是最简单的。

// app.tsx

import React, { FC } from 'react'

const App: FC = props => {
    const [accessToken, setAccessToken] = useAccessToken()
    return <div>{/* content */}</div>
}

export default App