如何在反应应用程序中令牌过期时注销用户

我正在开发一个应用程序，我使用 React 作为我的前端，React-apollo-graphql用于我的 API 调用。

我正在使用react-hooks即在 React 16.8 + 中。

我在做什么

我已经装了一个auth.js文件，当用户登录时，我在其中存储我的值，并检查令牌是否有效，(我正在检查到期(，但该文件仅在加载我的我正在刷新或重新加载页面，这不是它应该工作的方式

我的身份验证.js文件

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 };

正如我评论的那样，我正在检查令牌到期的行。

我唯一的问题是为什么它在页面重新加载上工作，而不是像我们在使用 Redux 时在存储文件中所做的那样在每个路由上工作。

我的应用.js

<AuthProvider>
<Router>
<div className="App wrapper">
<Routes/>
</div>
</Router>
</AuthProvider>

我的索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import ApolloClient from 'apollo-boost'
import { ApolloProvider } from '@apollo/react-hooks';
import { InMemoryCache } from 'apollo-cache-inmemory';

const client = new ApolloClient({
uri: 'my url',
cache: new InMemoryCache(),
});
ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
document.getElementById('root')
);

要点

由于我正在使用react-apollo-graphql所以它们是否提供ant身份验证流程？就像 redux 一样，我们必须创建一个存储文件来存储我们的数据

我正在使用 React 16.8 +，所以我使用的是 react-hooks，所以在这里我只使用use Reducer。

我唯一的问题是我做得对吗？我对其他方法持开放态度。

我已经使用 Vuex 在 Vue 中完成了身份验证和授权，我在那里用来创建一个在任何路由上运行的存储文件

与我对 Redux 所做的相同，在我的存储文件中，我用来存储状态和所有状态。

现在，如果我使用 react-hooks 和 react-apollo-graphql，那么无需使用 redux 做这件事。

我正在使用apollo-link-context来传递标头(授权(，如下所示

const authLink = setContext(() => {
const token = localStorage.getItem('JWT_Token')
return {
headers:{
Authorization: token ? `${token}` : ''
}
}
});

我认为在这里我可以检查每个路由或每个请求令牌是否有效(检查exp时间(如果无效，那么我将注销并清除我的本地存储，清除存储没什么大不了的，主要是如何重定向到登录页面。

您面临的问题很简单。您的 AuthReducer 在创建初始状态时只接收一次。现在，当您重新加载应用程序时，所有内容都会再次初始化，并且到期时间由您的逻辑处理。但是，在路由更改时，它不会重新评估您的初始状态。

但是，您可以做的是在使用setContext时，您可以通过使用jwtDecode解码令牌来检查到期验证，如果令牌过期并保存在 localStorage 中，因为这会在每个请求上执行

const authLink = setContext(async () => {
let token = localStorage.getItem('JWT_Token')
const { exp } = jwtDecode(token)
// Refresh the token a minute early to avoid latency issues
const expirationTime = (exp * 1000) - 60000
if (Date.now() >= expirationTime) {
token = await refreshToken()
// set LocalStorage here based on response;
}
return {
// you can set your headers directly here based on the new token/old token
headers: {
...
}
}
})

但是，由于您希望重定向到登录页面，并且在令牌过期时不刷新令牌，因此您可以使用带有路由的自定义历史记录对象

SRC/历史.js

import { createBrowserHistory } from 'history';
const history = createBrowserHistory()
export default history;

应用.js

import history from '/path/to/history.js';
import { Router } from 'react-router-dom';
<AuthProvider>
<Router history={history}>
<div className="App wrapper">
<Routes/>
</div>
</Router>
</AuthProvider>

然后在 setContext 中你可以做

import history from '/path/to/history';
const authLink = setContext(async () => {
let token = localStorage.getItem('JWT_Token')
const { exp } = jwtDecode(token)
const expirationTime = (exp * 1000) - 60000
if (Date.now() >= expirationTime) {
localStorage.clear();
history.push('/login');
}
return {
// you can set your headers directly here based on the old token
headers: {
...
}
}
})

对于您的问题，解决方案可能是这样的：

从上下文中删除身份验证部分。(不良做法(
创建订阅react-router组件以检查用户的身份验证状态。
在main组件中呈现它。

authverify.component.js

import { withRouter } from "react-router-dom";
const AuthVerifyComponent = ({ history }) => {
history.listen(() => {  // <--- Here you subscribe to the route change
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();
} else {
initialstate.user = jwt_Token_decoded;
}
}
});
return <div></div>;
};
export default withRouter(AuthVerifyComponent);

app.js

<AuthProvider>
<Router>
<div className="App wrapper">
<Routes />
<AuthVerifyComponent />
</div>
</Router>
</AuthProvider>;

从Yogesh Aggarwal的回答中获得灵感，我更喜欢这样做：


import React from 'react';
import {useLocation, useHistory} from 'react-router-dom';
const AuthProvider = () => {
const pathName = useLocation().pathname;
const history = useHistory();
if (pathName === your_path_that_need_authentication) {
// if token expired  then   history.push(login_page));
}
return null;
};
export default AuthProvider;

然后将此AuthProvider放入项目中。

从历史记录中提取路径名是一个非常好的选择，但不是最好的选择。问题是如果您键入或复制/粘贴所需的URL，它将不再起作用，但是使用useLocation钩子将解决此问题

相关内容

最新更新

热门标签：