使用 Apollo 和 React 捕获身份验证失败后如何正确重定向 [英] How to correctly redirect after catching authentication failure with Apollo and React

问题描述

我正在编写一个使用 apollo-client 的 React 应用程序，我正在使用 apollo-link-error 来全局捕获身份验证错误.我使用 createBrowserHistory 进行浏览器历史操作，并使用 redux 来管理我的应用状态.

I'm writing a react app that uses apollo-client and I'm using apollo-link-error to catch authentication errors globally. I'm using createBrowserHistory for browser history manipulation and redux to manage my app state.

关于身份验证错误，我想将用户重定向到 /login 页面.但是，使用 history.push('/login') 和 forceRefresh:false 这样做会更改 URL，但实际上并未在我的应用内导航.

On authentication error I want to redirect the user to the /login page. However, doing so with history.push('/login') and forceRefresh:false changes the URL but doesn't actually navigate inside my app.

如果我使用 forceRefresh:true 它可以工作，但应用程序完全重新启动，我想避免这种情况.

If I use forceRefresh:true it works, but the app is completely restarted, which I'd like to avoid.

const errorLink = onError(({ graphQLErrors, networkError }) => {
    if(graphQLErrors[0].extensions.code == "UNAUTHENTICATED") {
        // with forceRefresh:true this works, but causes a nasty 
        // reload, without the app doesn't navigate, only the url changes 
        history.push('/login')
    }
});

`

let links = [errorLink, authLink, httpLink];    
const link = ApolloLink.from(links);

    const client = new ApolloClient({
        link: link,
        cache: new InMemoryCache(),
        connectToDevTools: true,
    });

我认为问题在于我没有使用 redux-router 方法进行导航(因此即使 url 更改，应用程序也保持不变)

I think the problem is that I'm not using redux-router methods to navigate (so the app stays the same even though the url changes)

问:当我不在组件内部时，如何获得类似于使用 withRouter() 的 redux history 对象?处理这种情况的正确方法是什么?

Q: how do I get a redux history object similar to using withRouter() when I'm not inside a component? What is the proper way to handle this situation?

推荐答案

一种可能解决方案的简短摘要:

Short summary of one possible solution:

1. 将所有需要身份验证的路由封装在 组件中，该组件会将未经身份验证的用户重定向到登录页面.ProtectedRoute-component 只检查用户是否有有效的令牌，如果没有则重定向用户.
2. 内部错误链接首先删除令牌，或者以某种方式使其无效，然后调用location.reload()

1. Wrap all routes that require authentication inside <ProtectedRoute> component that redirects unauthenticated users to login page. ProtectedRoute-component just check if user has valid token, if not redirects user.
2. Inside error link first remove token, or somehow unvalidate it, then call location.reload()

详细实现如下.

我找不到任何简单的解决方案.在正常情况下，为了重定向用户，我使用 react-router navigate() 钩子.在错误链接中，我发现无法使用 react-hooks.

I was not able to find any straightforward solution. In normal cases, to redirect user I use react-router navigate() hook. Inside the error link I found no way to use react-hooks.

但是，我设法解决了实际问题.我实现了 ProtectedRoute 组件，该组件包装了需要身份验证的应用程序的所有部分:

However, I managed to solve the actual problem. I implemented ProtectedRoute component which wraps all the parts of the application which requires authentication:

type ProtectedRouteProps = {
    path: string;
    toRedirect: string;
};

export const ProtectedRoute: FunctionComponent<ProtectedRouteProps> = ({
    path,
    toRedirect,
    children,
}) => {
    return isAuthenticated() ? (
        <Route path={path}>
            {children}
        </Route>
    ) : (
        <Navigate to={{ pathname: toRedirect }} />
    );
};

type ValidToken = string;
type ExpiredToken = 'Expired token'
type NullToken = '' | null

export type JwtTokenType = (ValidToken | ExpiredToken | NullToken )
export const isNullToken = (token: JwtTokenType) : boolean => {
    return (token === '' || token === null)
}

export const isExpiredToken = (token: JwtTokenType) : boolean => {
    return token === "Expired token"
}

export const isAuthenticated = () : boolean => {
    let token = getTokenFromCookies();
    return !(isExpiredToken(token) || isNullToken(token));
}

我是这样使用的:

<Routes>
   <Route path="login" element={<LoginPage />} />
   <ProtectedRoute path="/*" toRedirect="login">
      // protected routes here
   </ProtectedRoute>
</Routes>

为了处理未经身份验证的用户的注销和重定向，我实现了两个功能:

To handle logouts and redirects for unauthenticated user I implemented two functions:

// Use this in normal cases
export function useHandleLogout(): () => void {
    const navigate = useNavigate();
    // maybe call other hooks
    });
    function handleLogout() {
        navigate("/login");
        removeToken();
        // do other stuff you want
    }
    return handleLogout;
}

// Use this inside error-link
export const handleLogoutWithoutHook = () => {
    // Logout without hook
    removeToken();
    // do other stuff required when logout
    // eslint-disable-next-line no-restricted-globals
    location.reload();
    // location.reload() after token removed affects user redirect
    // when component is wrapped inside <ProtectedRoute> component

};

export const removeToken = () => {
    Cookies.remove("jwt-token")
}

最后在错误链接中:

export const errorLink =  onError(
    ({ graphQLErrors, networkError, operation, forward }) => {
        if (graphQLErrors) {
            for (let err of graphQLErrors) {
                if (err.message.includes('AnonymousUser')) {
                    handleLogoutWithoutHook()
                    return
                }
                if (err.message.includes('Signature has expired')) {
                    handleLogoutWithoutHook()
                }
                console.log(err.message)
            }
        }
        return forward(operation)
    }
);

这篇关于使用 Apollo 和 React 捕获身份验证失败后如何正确重定向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！