Как проверить, вошел ли пользователь в систему, прежде чем перенаправлять на страницу входа в систему с помощью локального хранилища и реагировать на избыточность - PullRequest
Новая
       12

Как проверить, вошел ли пользователь в систему, прежде чем перенаправлять на страницу входа в систему с помощью локального хранилища и реагировать на избыточность

1 голос
/ 26 апреля 2019

Я использую HOC для аутентифицированной маршрутизации. Я хочу проверить, есть ли зарегистрированный пользователь в локальном хранилище перед перенаправлением на страницу входа, но когда приложение загружается, оно сначала перенаправляет, а затем проверяет в локальном хранилище.

App.js 

class App extends Component {
  render() {
    return (
      <div className="App">
        <BrowserRouter>
          <Route render={({ history }) => (
            <div className="App">
              <Navbar currUser={this.props.currUser} logout={this.props.logout} history={history}/>
              <Switch>
                <Auth 
                    exact path="/" 
                    component={HomePage} 
                    currUser={this.props.currUser} 
                    loadRecipes={this.props.loadRecipes} 
                    recipes={this.props.recipes} 
                />
                <Route
                    path="/login" 
                    render={(props) => (<LoginPage {...props} login={this.props.login} />)}
                />
              </Switch>
            </div>
          )} />
        </BrowserRouter>
      </div>
    );
  }
}

const Auth = ({ component: Component, ...rest }) => {
  const currUser = rest.currUser;
  return (
    <Route {...rest} render=
      {props =>
        currUser ?
          (<Component {...props}  {...rest} />) :
          (<Redirect to={{ pathname: "/login", state: currUser }} />)
      } />
  )
}


const mapStateToProps = (state) => {
  return {
    currUser: state.login.currUser,
    recipes: state.recipe.recipes,
    recipe: state.recipe.recipe,
    user: state.user.userToDisplay,
  }
}

const mapDispatchToProps = {
  ...loginActions,
  ...recipeActions,
  ...userActions
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

LoginActions.js 

export const login = (credentials) => {
    return async (dispatch) => {
        try {
            const user = await UserService.login(credentials);
            dispatch({ type: 'SET_CURR_USER', user })
            return true;
        } catch (err) {
            return false
        }
    }
}

UserService.js 

async function login(credentials) {
    try {
        const { data } = await axios.post(`${BASE_URL}/login`, credentials);
        StorageService.saveToLocal(USER_KEY, data);
        return data;
    } catch (err) {
        throw err;
    }
}

Что мне нужно сделать, чтобы приложение сначала проверило, вошел ли пользователь в систему, а если нет, перенаправьте?

Спасибо!

Edit:

LoginReducer.js 

const loginReducer = (state = {
    currUser: ''
}, action) => {
    switch (action.type) {
        case 'SET_CURR_USER':
            return {
                ...state,
                currUser: action.user
            }
        default:
            return state;
    }
}

export default loginReducer;

StorageService.js 

export default {
    getFromLocal,
    saveToLocal,
    removeFromLocal
}
function getFromLocal(key) {
    const res = localStorage.getItem(key)
    return res ? JSON.parse(localStorage.getItem(key)) : null
}
function saveToLocal(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
}

function removeFromLocal(key) {
    localStorage.removeItem(key);
}

журнал текущего пользователя в Auth:

  • первый (при загрузке приложения) - currUser: ''
  • после входа в систему и перенаправления на HomePage - currUser: {_id: "5cc15863d1a9f045fcbd6d85", имя: "amanda"}
...