在React中根据用户的状态进行重定向。

11 浏览
0 Comments

在React中根据用户的状态进行重定向。

目前，我的路由器看起来像这样：

LoggedinPage如果用户未登录，则会重定向到/login，而OnboardedPage如果用户尚未完成入职流程（选择用户名等）则会重定向到/onboarding。然而，我认为未来可能需要更多这样的条件重定向。如何处理这些条件重定向是最好的方式？是否可能有一个组件来处理所有重定向？

0

2 答案

0 Comments

问题的出现原因：需要根据用户的登录状态来进行页面重定向。

解决方法：使用React Router来解析URL，并调用一个函数来检查用户是否登录，并根据结果进行重定向。

下面是解决问题的代码示例：

import { browserLocation } from './browser-location'
export default function checkLoggedIn() {
    if (localStorage.jwt === null)
        browserLocation.pushState('/login')
}

在组件的render部分调用这个函数来进行重定向。

需要注意的是，这种方法需要手动解析URL。在代码中可以通过判断localStorage.jwt是否为null来检查用户是否登录。如果未登录并且当前路径不是/login，则进行重定向。

希望以上内容能够帮助到你解决问题。

0
0 Comments

在React中基于用户状态进行重定向的问题常常出现，主要原因是为了在用户进入某个路由时进行权限验证或其他条件判断，并根据结果进行重定向。为了解决这个问题，可以使用<Route>组件的onEnter钩子函数来实现。这个钩子函数在路由匹配时被调用，可以按照以下方式定义和使用：

function requireAuth(nextState, replace) {
    if (!loggedIn()) {
        replace({ pathname: 'login' });
    }
}

上述代码中，requireAuth函数用于进行权限验证，如果用户未登录，则通过replace方法将用户重定向到登录页面。

另一种更可组合的例子是可以同时进行多个检查：

function checkAuth() {
    if (!loggedIn()) {
        return { pathname: 'login' };
    }
}
function checkOnboarding() {
    if (!completedOnboarding()) {
        return { pathname: 'onboarding' };
    }
}
function redirect(...checks) {
    return function(nextState, replace) {
        let result;
        checks.some(check => {
            result = check();
            return !!result;
        });
        result && replace(result);
    };
}

上述代码中，checkAuth和checkOnboarding函数分别用于进行权限验证和检查用户是否完成了引导流程。通过redirect函数，可以将这两个函数组合起来，并在onEnter钩子函数中使用。在路由匹配时，会依次调用组合函数中的每个检查函数，如果有返回结果，则通过replace方法进行重定向。

这种方法的好处是可以根据需要组合不同的检查函数，实现灵活的重定向逻辑。但是需要注意的是，replace方法会刷新整个窗口，这与SPA（单页面应用）的风格不太一致，可能会带来一些不便。

0