我正在使用react钩子并创建了login logout功能,但现在我希望用户在令牌过期时注销
- 我正在欢迎页面上使用它,如果我在两分钟后执行了其他操作并且令牌已过期,我希望注销该用户
- 我创建了一个上下文,即身份验证上下文,其中包含登录注销上下文
- 我只想在令牌过期时调用logout函数
我的身份验证上下文
const initialstate = {
user: null,
};
if (localStorage.getItem("JWT_Token")) {
const jwt_Token_decoded = Jwt_Decode(localStorage.getItem("JWT_Token"));
console.log(jwt_Token_decoded.exp * 1000);
console.log(Date.now());
if (jwt_Token_decoded.exp * 1000 < Date.now()) {
localStorage.clear(); // this runs only when I refresh the page or reload on route change it dosent work
} else {
initialstate.user = jwt_Token_decoded;
}
}
const AuthContext = createContext({
user: null,
login: (userData) => {},
logout: () => {},
});
const AuthReducer = (state, action) => {
switch (action.type) {
case "LOGIN":
return {
...state,
user: action.payload,
};
case "LOGOUT":
return {
...state,
user: null,
};
default:
return state;
}
};
const AuthProvider = (props) => {
const [state, dispatch] = useReducer(AuthReducer, initialstate);
const login = (userData) => {
localStorage.setItem("JWT_Token", userData.token);
dispatch({
type: "LOGIN",
payload: userData,
});
};
const logout = () => {
localStorage.clear();
dispatch({ action: "LOGOUT" });
};
return (
<AuthContext.Provider
value={{ user: state.user, login, logout }}
{...props}
/>
);
};
export { AuthContext, AuthProvider };
在上面的代码中,我正在检查令牌是否过期,但它只在页面重新加载时运行,这里我希望在每次路由更改时运行它,以便可以检查令牌是否过期
我不知道该怎么做在哪里做。
要注销,我只需要调用我的注销上下文函数,但如何调用我不知道
我不知道如果我必须在我的axios示例中做一些事情,这是一个单独的文件,如下所示,在这里我创建一个示例,以便我可以在一个地方定义我的头文件和其他内容
//global axios instance
import axios, { AxiosHeaders } from "axios"; // import axios from axios
const BASE_URL = "https://jsonplaceholder.typicode.com"; // server api
export default axios.create({
baseURL: BASE_URL,
headers: {
"Content-Type": "Application/json",
Access-token: "token here",
},
});
我不知道如何处理这个问题,我检查了This one,但在这个例子中使用了GraphQL
,所以有一个函数来设置上下文,我可以传递并使用store
来调度我的注销。
但在这里,我真的不知道如何使用axios对resAPI执行此操作
我已经分享了我的axiosInstance代码,我认为需要在那里添加一些东西,我准备使用任何方法来帮助我生成一些中间件类的东西,以便我可以在一个地方检查令牌。
1条答案
按热度按时间balp4ylt1#
在您的方法中需要考虑以下几点
1.您可以更新注销功能,将用户发送到登录页面,这样就可以保证每当用户注销时都会执行此操作;
1.使用API响应来验证令牌何时过期,这样您就不需要一直监视令牌过期的时间,也不需要在任何未经授权的API调用之后注销用户;
1.注意这个
localStorage.clear()
调用,有时它可以清除比你想要的更多的东西,声明你真正想要清除的东西总是一个好主意。有时候你想保留你的用户语言、主题或者一些在注销后不应该被清除的UI配置;1.如果您确实需要处理客户端的注销,而不需要等待API响应,可以尝试setTimeout方法(不推荐)