包含url数据的上下文

Question

我正在尝试制作一个spotify stats应用程序，我正在尝试创建一个上下文来保存用户登录时应用程序在url中给您的令牌。

TokenContext.js:

import React, { useEffect, useState } from "react";
// token is the state
// logOut and logIn is a function for changing the state.
export const TokenContext = React.createContext({
token: "",
logOut: () => { },
logIn: () => { }
});
function getInitialState() {
const token = localStorage.getItem('token')
return token ? token : ""
}
const TokenContextProvider = (props) => {
const [token, setToken] = useState(getInitialState);
// Use Effect for getting the token form the url and saving it in the local storage
useEffect(() => {
const hash = window.location.hash
let _token = window.localStorage.getItem("token")
if (!_token && hash) {
_token = hash.substring(1).split("&").find(elem => elem.startsWith("access_token")).split("=")[1]
window.location.hash = ""
window.localStorage.setItem("token", _token)
}
setToken(_token)

}, [])
const logIn = (token) => {
setToken(token);
};
const logOut = () => {
setToken("")
window.localStorage.removeItem("token")
}
return (
<TokenContext.Provider
value={{ token: token, logOut: logOut, logIn: logIn }}
>
{props.children}
</TokenContext.Provider>
);
};
export default TokenContextProvider;

问题是useEffect钩子不工作，因为它没有将令牌保存在本地存储中，并且当用户已经登录时url保持不变。

url如何保留的例子:http://localhost: 3000/# access_token = BQA4OEmPw6VRknPFNW9Z2dS-uGZHbEJ3WbAWJy-jmsLFEy_PWMgMMfMYKqAQKdNgd6j1FDPIKYTNlztx2L1IgwC_gLvee-xx0hj8rKOVgDVtN1NktbhV4sHRtuzK_1EaRNGjrzxvkvXqdQ3jd0NiD4mHzd1uWC2udWTXejHDXHf9x8K3MxZGIQ& token_type = Bearer& expires_in = 3600

Answer 1

useEffect只运行一次(当上下文提供程序被挂载时)-您确定URL当时已经包含访问令牌吗?

也许你只需要在你的效果中添加一个依赖项，当URL发生变化时，它会像这里描述的那样重新运行。