umi#Redirect TypeScript Examples

AuthorizedRoute: React.SFC<AuthorizedRouteProps> = ({
  component: Component,
  render,
  authority,
  redirectPath,
  ...rest
}) => (
  <Authorized
    authority={authority}
    noMatch={<Route {...rest} render={() => <Redirect to={{ pathname: redirectPath }} />} />}
  >
    <Route
      {...rest}
      render={(props: any) => (Component ? <Component {...props} /> : render(props))}
    />
  </Authorized>
)

render() {
    const { isReady } = this.state;
    const { children, loading, currentUser } = this.props;
    // You can replace it to your authentication rule (such as check token exists)
    // You can replace it with your own login authentication rules (such as judging whether the token exists)
    const isLogin = currentUser && currentUser.userid;
    const queryString = stringify({
      redirect: window.location.href,
    });

    if ((!isLogin && loading) || !isReady) {
      return <PageLoading />;
    }
    if (!isLogin && window.location.pathname !== '/user/login') {
      return <Redirect to={`/user/login?${queryString}`} />;
    }
    return children;
  }

AuthorizedRoute: React.SFC<AuthorizedRoutePops> = ({
  component: Component,
  render,
  authority,
  redirectPath,
  ...rest
}) => (
  <Authorized
    authority={authority}
    noMatch={<Route {...rest} render={() => <Redirect to={{ pathname: redirectPath }} />} />}
  >
    <Route
      {...rest}
      render={(props: any) => (Component ? <Component {...props} /> : render(props))}
    />
  </Authorized>
)

AuthComponent: React.FC<AuthComponentProps> = ({
  children,
  route = {
    routes: [],
  },
  location = {
    pathname: '',
  },
  user,
  dispatch
}) => {
  const { currentUser } = user;
  const { routes = [] } = route;
  const isLogin = currentUser && currentUser.name;

  const autz = localStorage.getItem('hsweb-autz');
  if (!autz) {
    dispatch!({
      type: 'user/fetchCurrent',
    });
    return <PageLoading tip="获取用户数据中" />
  } else {
    return (
      <Authorized
        authority={getRouteAuthority(location.pathname, routes) || ''}
        noMatch={!isLogin ? <Redirect to="/exception/403" /> : <Redirect to={location.pathname} />}
      >
        {children}
      </Authorized>
    );
  }
}

render() {
    const { isReady } = this.state;
    const { children, loading, currentUser } = this.props;
    // You can replace it to your authentication rule (such as check token exists)
    // 你可以把它替换成你自己的登录认证规则（比如判断 token 是否存在）
    const isLogin = currentUser && currentUser.userid;
    const queryString = stringify({
      redirect: window.location.href,
    });

    if ((!isLogin && loading) || !isReady) {
      return <PageLoading />;
    }
    if (!isLogin && window.location.pathname !== '/user/login') {
      return <Redirect to={`/user/login?${queryString}`} />;
    }
    return children;
  }

AuthComponent: React.FC<AuthComponentProps> = ({
  children,
  route = {
    routes: [],
  },
  location = {
    pathname: '',
  },
  user,
}) => {
  const { currentUser } = user;
  const { routes = [] } = route;
  const isLogin = currentUser && currentUser.name;
  return (
    <Authorized
      authority={getRouteAuthority(location.pathname, routes) || ''}
      noMatch={isLogin ? <Redirect to="/exception/403" /> : <Redirect to="/user/login" />}
    >
      {children}
    </Authorized>
  );
}

render() {
    const {isReady} = this.state;
    const {children, loading} = this.props;
    // You can replace it to your authentication rule (such as check token exists)
    // You can replace it with your own login authentication rules (such as judging whether the token exists)
    const isLogin = localStorage.getItem(LSExtStaffAdminID) !== null;
    const queryString = stringify({
      redirect: window.location.href,
    });

    if ((!isLogin && loading) || !isReady) {
      return <PageLoading/>;
    }
    if (!isLogin && window.location.pathname !== '/staff-admin/login') {
      return <Redirect to={`/staff-admin/login?${queryString}`}/>;
    }
    return children;
  }

render() {
    const {isReady} = this.state;
    const {children, loading} = this.props;
    // You can replace it to your authentication rule (such as check token exists)
    // You can replace it with your own login authentication rules (such as judging whether the token exists)
    const isLogin = localStorage.getItem(LSExtStaffID) !== null;
    const queryString = stringify({
      redirect: window.location.href,
    });

    if ((!isLogin && loading) || !isReady) {
      return <PageLoading/>;
    }

    if (!isLogin && window.location.pathname !== '/staff-frontend/login') {
      return <Redirect to={`/staff-frontend/login?${queryString}`}/>;
    }
    return children;
  }

SecurityLayout = (props: SecurityLayoutProps) => {
  const { dispatch, settings } = props;
  const [isReady, setIsReady] = useState(false);
  const { children, loading } = props;
  // You can replace it to your authentication rule (such as check token exists)
  // 你可以把它替换成你自己的登录认证规则（比如判断 token 是否存在）
  const isLogin = !!localStorage.getItem('x-access-token');
  const token = getAccessToken();
  const queryString = stringify({
    redirect: window.location.href,
  });
  useEffect(() => {
    setIsReady(true);
    if (dispatch) {
      if (token !== 'null') {
        dispatch({
          type: 'user/fetchCurrent',
        });
      }else{
          router.push('/user/login');
      }
    }
  }, []);

  /**
   * constructor
   */
  useEffect(() => {
    if (dispatch) {
      dispatch({
        type: 'settings/fetchConfig',
        callback: () => {
          if (settings.titleIcon) {
            document.getElementById('title-icon')!.href = settings.titleIcon;
          }
          setIsReady(true);
        },
      });
    }
  }, [settings.title]);

  const render = () => {
    if (isLogin) {
      initWebSocket();
    }

    if ((!isLogin && loading) || !isReady) {
      return <PageLoading />;
    }
    if (!isLogin) {
      // TODO 此处应使用注释的代码。但跳转存在问题，
      // return <Redirect to={`/user/login?${queryString}`} />;
      return <Redirect to="/user/login"></Redirect>;
    }
    return children;
  };
  return render();
}