使用 AWS Amplify / Cognito 监听用户不活动
Listen to user inactivity with AWS Amplify / Cognito
鉴于您可以通过 Amazon Cognito 控制台设置访问、刷新和 ID 令牌过期时间。我如何侦听令牌是否过期,以便我可以将用户重定向回登录页面并在发生这种情况时显示信息性消息?
我注意到 Amplify 有一个 Hub 实用程序,您可以在其中添加监听器,但我不确定要监听什么。
https://docs.amplify.aws/lib/utilities/hub/q/platform/js/#state-management
进行了大量研究,发现使用名为 Hub
的 Amplify
实用程序,您可以监听刷新令牌过期以及其他与身份验证相关的事件。
https://docs.amplify.aws/lib/utilities/hub/q/platform/js/
这是一个使用它的钩子示例,React 风格:
export const useCognitoContextProvider = () => {
const [context, setContext] = useState({ isSignedIn: false });
useEffect(() => {
const authListener = ({ channel, payload: { event } }) => {
if (channel === 'auth') {
switch (event) {
case 'signIn':
setContext(prevState => (prevState.isSignedIn ? prevState : { ...prevState, isSignedIn: true }));
break;
case 'tokenRefresh_failure':
SignOutService.signOut();
break;
}
}
};
Hub.listen('auth', authListener);
return (): void => {
Hub.remove('auth', authListener);
};
}, []);
return context;
};
和用法:
const context = useCognitoContextProvider();
// ...
<Provider store={store}>
<CognitoContext.Provider value={cognitoContext}>
<Routes />
</CognitoContext.Provider>
</Provider>
鉴于您可以通过 Amazon Cognito 控制台设置访问、刷新和 ID 令牌过期时间。我如何侦听令牌是否过期,以便我可以将用户重定向回登录页面并在发生这种情况时显示信息性消息?
我注意到 Amplify 有一个 Hub 实用程序,您可以在其中添加监听器,但我不确定要监听什么。
https://docs.amplify.aws/lib/utilities/hub/q/platform/js/#state-management
进行了大量研究,发现使用名为 Hub
的 Amplify
实用程序,您可以监听刷新令牌过期以及其他与身份验证相关的事件。
https://docs.amplify.aws/lib/utilities/hub/q/platform/js/
这是一个使用它的钩子示例,React 风格:
export const useCognitoContextProvider = () => {
const [context, setContext] = useState({ isSignedIn: false });
useEffect(() => {
const authListener = ({ channel, payload: { event } }) => {
if (channel === 'auth') {
switch (event) {
case 'signIn':
setContext(prevState => (prevState.isSignedIn ? prevState : { ...prevState, isSignedIn: true }));
break;
case 'tokenRefresh_failure':
SignOutService.signOut();
break;
}
}
};
Hub.listen('auth', authListener);
return (): void => {
Hub.remove('auth', authListener);
};
}, []);
return context;
};
和用法:
const context = useCognitoContextProvider();
// ...
<Provider store={store}>
<CognitoContext.Provider value={cognitoContext}>
<Routes />
</CognitoContext.Provider>
</Provider>