如何解决如何将 auth0 访问令牌添加到 react-apollo
我正在尝试在 react js 中向 apollo 客户端添加授权令牌以让用户登录...
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { ThemeProvider } from 'react-jss';
import Theme from 'resources/theme';
import Routes from 'routes';
import './index.css';
import * as serviceWorker from './serviceWorker';
import { Auth0Provider } from "@auth0/auth0-react";
import 'bootstrap/dist/css/bootstrap.min.css';
import ReactNotification from 'react-notifications-component'
import './components/orders/fonts/NotoSansJP-Regular.otf'
import 'react-notifications-component/dist/theme.css'
import { ApolloProvider,ApolloClient,InMemoryCache } from '@apollo/client';
import { useAuth0 } from "@auth0/auth0-react";
const client = new ApolloClient({
uri: process.env.REACT_APP_API_BACK,headers: {
Authorization: `Bearer ${accessToken}` // doesn’t work
},cache: new InMemoryCache()
});
ReactDOM.render(
<Auth0Provider
domain= {process.env.REACT_APP_AUTH0_DOMAIN }
clientId= {process.env.REACT_APP_AUTH0_CLIENT_ID}
redirectUri={window.location.origin}
audience={process.env.REACT_APP_AUTH0_AUDIENCE}
scope="warehouse"
>
<ApolloProvider client={client}>
<ThemeProvider theme={Theme}>
<Router>
<ReactNotification />
<Routes />
</Router>
</ThemeProvider>,</ApolloProvider>
</Auth0Provider>,document.getElementById('root')
);
serviceWorker.unregister();
获取我需要导入的令牌:
import { useAuth0 } from "@auth0/auth0-react";
添加这一行:
const { getAccessTokenSilently } = useAuth0();
但这不能在 index.js 中完成,我认为
获取令牌:
const accessToken = await getAccessTokenSilently
这是我在文档和谷歌搜索中发现的,但我认为在我的情况下无法完成,大多数教程展示了如何在个人资料页面中获取用户数据(包括令牌),但这不是我想要的.
我想将它传递给 index.js
中的客户端解决方法
您需要为
创建专用组件function useToken() {
const { getAccessTokenSilently } = useAuth0();
const [token,setToken] = useState(null);
useEffect(() => { getAccessTokenSilently().then(setToken) },[])
return token;
}
function MyApolloProvider({ children }) {
const token = useToken();
// useRef instead of useMemo to make sure client is not re-created randomly
const clientRef = useRef(null);
if (token && !clientRef.current) {
// This code should only be executed once.
clientRef.current = new ApolloClient(/**/)
}
if (!clientRef.current) {
// Now we have to wait until client is initialized with token,so you might want to add some spinner
return null;
}
return <ApolloClient client={clientRef.current} >{children}</ApolloClient>
}
然后你在 ReactDOM.render 中使用它而不是原始的 ApolloProvider。
如果令牌发生变化,事情就会变得更加困难。 https://www.apollographql.com/docs/react/networking/authentication/#header
您仍然使用类似的方法:
function useToken() { /* should return actual token and update it if changed */ }
function MyApolloProvider({ children }) {
const token = useToken();
const tokenRef = useRef(token);
const clientRef = useRef(null);
tokenRef.current = token; // make sure that tokenRef always has up to date token
if (!clientRef.current) {
// This function is called on each request individually and it takes token from ref
const authLink = setContext((_,{ headers }) => {
// similar to documentation example,but you read token from ref
const token = tokenRef.current;
return {
headers: {
...headers,authorization: `Bearer ${token}`,}
}
});
clientRef.current = new ApolloClient(
link: authLink.concat(httpLink),// ...
)
}
}
在 index.js
中的使用,无论是第一种还是第二种情况:
ReactDOM.render(
<Auth0Provider /* options */>
<MyApolloProvider>
{/* ... */}
</MyApolloProvider>
</Auth0Provider>,document.getElementById("root")
);
这里的主要内容是 MyApolloProvider
应该在 Auth0Provider
内才能访问令牌。
这就是我最终做的:
import {
ApolloProvider,ApolloClient,InMemoryCache,HttpLink,} from '@apollo/client';
import { setContext } from '@apollo/link-context';
import { useAuth0 } from '@auth0/auth0-react';
const ApolloProviderWithAuth0 = ({ children }) => {
const { getAccessTokenSilently } = useAuth0();
const httpLink = new HttpLink({
uri: process.env.REACT_APP_GRAPHQL_URI,});
const authLink = setContext(async (_,{ headers,...rest }) => {
let token;
try {
token = await getAccessTokenSilently();
} catch (error) {
console.log(error);
}
if (!token) return { headers,...rest };
return {
...rest,headers: {
...headers,},};
});
const client = React.useRef();
if (!client.current) {
client.current = new ApolloClient({
link: authLink.concat(httpLink),cache: new InMemoryCache(),});
}
return (
<ApolloProvider client={client.current}>
{children}
</ApolloProvider>
);
};
export { ApolloProviderWithAuth0 };
然后将其用作您的 App 组件中的 Provider。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。