PrivateRoute компонент для аутентификации - PullRequest
Новая
       9

PrivateRoute компонент для аутентификации

0 голосов
/ 17 февраля 2020

Я разрабатываю приложение Reactjs - nodejs. Я хотел бы сделать аутентификацию JWT. когда мы заходим, я даю уникальный токен пользователю. Затем, благодаря этому токену, если он действителен, я разрешаю пользователю перемещаться по моему маршрутизатору. Мой частный компонент маршрута выглядит так: PrivateRoute

Моя функция getId такова:

asyn c function getId () {let res = await ax ios ('_ / api / users / me', {config}). catch (err => {console.log (err)});

return res + 1; }

Наконец, компонент config является токеном, хранящимся в localStorage:

const config = {headers: {Authorization: ${window.localStorage.getItem("token")}}};

GetId () возвращает идентификатор пользователя, если он вошел в систему, иначе он равен нулю.

Теперь проблема в том, что мой privateRoute всегда перенаправляет на путь "/". Я думаю, это из-за топора ios (обещание), который дает мне идентификатор пользователя слишком поздно. Пожалуйста, скажите мне, если вы хорошо понимаете, и если у вас есть решение. Спасибо тебе

Ответы [ 2 ]

0 голосов
/ 17 февраля 2020

Если вы используете Redux, вы можете сделать следующее:

в редукторе: 

case LOGIN_ADMIN_SUCCESS:
            localStorage.setItem("token", action.payload.token);
            return {
                ...state,
                user: action.payload,
                isSignedIn: true,
                loadingSignIn: false,
                token: action.payload.token,
            };

, тогда в вашем частном маршрутизаторе вы должны проверить эти значения, например 

const PrivateRoute = ({ component: Component, admin, ...rest }) => (
    <Route
        {...rest}
        render={(props) => {
            if (admin.loadingSignIn) {
                return <h3>Loading...</h3>;
            } else if (!admin.isSignedIn) {
                return <Redirect to="/login" />;
            } else {
                return <Component {...props} />;
            }
        }}
    />
);
0 голосов
/ 17 февраля 2020

Вы можете создать приватный маршрут следующим образом. 

const PrivateRoute = ({ component: Component, ...props }) => {
  return (
    <Route
      {...props}
      render={innerProps =>
        localStorage.getItem("Token") ? (
          <Component {...innerProps} />
        ) : (
          <Redirect
            to={{
              pathname: "/",
              state: { from: props.location }
            }}
          />
        )
      }
    />
  );
};

, затем вы можете использовать 

<PrivateRoute path="/" component={FIlname} />
...