Использование паспорта Google OAuth2 для аутентификации частных маршрутов React - PullRequest
Новая
       63

Использование паспорта Google OAuth2 для аутентификации частных маршрутов React

0 голосов
/ 23 марта 2020

В настоящее время я разрабатываю приложение, использующее стек MERN с Passport. js для аутентификации, в частности, Google OAuth2 Strategy. Мое текущее приложение имеет простые функции входа в систему, которые перенаправляют с клиента на страницу согласия Google и обратно на URL-адрес перенаправления сервера, который затем следует перенаправить в основное приложение клиента. Я почти уверен, что это все, что вам нужно сделать на стороне сервера, и теперь я немного озадачен тем, как справиться с этим на стороне React Router.

Итак, во-первых, у меня есть вход в Google кнопка в моем маршруте Publi c, которая затем попадает в конечную точку на сервере, который запускает Google OAuth 

class Public extends Component {
    render() {
        return (
            <div>
                <h1>Public Route</h1>
                <a href="http://localhost:5000/api/auth/google">Sign In</a>
            </div>
        )
    }
}

после перенаправления сервера с localhost: 5000 / auth / google / redirect до localhost: 3000 / protected , я полагаю, это восходит к приложению. js, которое запускает маршрутизатор React 

class App extends Component {

    constructor(props) {

        super(props)
        this.state = { authenticated: false }
    }

    componentDidMount() {

        api.get('/auth/user').then(({data}) => {

            if (data) this.setState({authenticated: true})
        }).catch((err) => console.error(err))
    }

    render() {

        const { authenticated } = this.state
        return (
            <div className="App">
                <Switch>
                    <Route exact path='/' component={Public} />
                    <PrivateRoute exact authed={authenticated} path='/app' component={Protected} />
                </Switch>
            </div>
        )
    }
}

и это то, где вещи становятся немного грязными. Поэтому я думаю, что он будет отображаться первым, прежде чем componentDidMount (), поэтому состояние authenticated по-прежнему равно false, поэтому PrivateRoute перенаправляет клиента обратно на localhost: 3000 / и выполняет рендеринг маршрут Publi c. И после всего этого запускает componentDidMount () и, наконец, выбирает пользователя, и теперь authenticated - true, но сейчас уже слишком поздно, так как клиент уже перенаправлен на localhost: 3000 / , поэтому он больше не затрагивает PrivateRoute.

Вот мой компонент PrivateRoute на случай, если кому-то интересно: 

const PrivateRoute = ({ component: Component, authed, ...rest }) => (
    <Route { ...rest} render={(props) => authed ? 
        <Component {...props} /> :
        <Redirect to={{pathname: '/'}} />
    } />
)

Что я сделал до сих пор:

  • use componentWillMount () - без разницы, плюс, я думаю, это скоро устареет
  • использовать глобальный объект аутентификации, который имеет isAuthenticated , login () и logout () участников. Я создал экземпляр этого объекта в моем компоненте Publi c и добавил onClick = {auth.login} вместе с href. Однако onClick запускается в первую очередь до перенаправления браузера href, поэтому он сначала пытается извлечь пользователя (хотя его еще нет), поэтому isAuthenticated не получает значение true

Заранее спасибо!

...