Как перенаправить на любой URL после входа в редирект?

Как перенаправить на любой URL после входа в редирект?

Мое решение состояло в том, чтобы сделать по существу то, что вы описываете. Я сделал HOC, чтобы обернуть компонент моего маршрута, если он требует, чтобы пользователь вошел в систему:

 import React, { Component } from 'react'; import { connect } from 'react-redux'; import { withRouter, Redirect } from 'react-router-dom'; /** * Higher-order component (HOC) to wrap restricted pages */ export default function LoggedInOnly(BaseComponent) { class Restricted extends Component { state = {}; static getDerivedStateFromProps(nextProps) { const { history, location } = nextProps; if (!nextProps.isLoggedIn) { history.replace({ pathname: '/signin', search: `dest=${encodeURIComponent(location.pathname)}` }); } return null; } render() { const { location, staticContext } = this.props; if (this.props.isLoggedIn) return {amp}lt;BaseComponent {...this.props} /{amp}gt;; const destinationURL = `/signin?dest=${encodeURIComponent(location.pathname)}`; if (staticContext) staticContext.url = destinationURL; return {amp}lt;Redirect to={destinationURL} /{amp}gt;; } } const mapStateToProps = state ={amp}gt; ({ isLoggedIn: !!state.globalUserState.loggedInUserEmail, }); return withRouter(connect(mapStateToProps)(Restricted)); } 

Я также установил URL статического контекста в моем случае, чтобы я мог соответствующим образом обрабатывать перенаправления при рендеринге на стороне сервера. Если вы не делаете то же самое, вы можете игнорировать эту часть.

Однако для его использования я перенаправляю после своей функции рендеринга SSR, например:

 if (context.url) { console.log(`Redirecting to URL ${context.url}`); return res.redirect(context.url); } 

Маршрут, использующий это, будет выглядеть так:

 {amp}lt;Route path="/preferences" component={LoggedInOnly(SettingsView)} /{amp}gt; 

На моей странице входа я беру параметры URL, чтобы увидеть, есть ли пункт назначения. Если есть, я перенаправляю туда при успешном входе в систему.

Я делаю это, используя строку запроса и компонент поиска местоположения:

 const { destination } = queryString.parse(props.location.search); 

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

При успешной аутентификации в клиенте я просто перенаправляю к месту назначения, если оно существует:

 window.location.href = this.props.destination; 

Вы также можете использовать history.push или аналогичный для выполнения вышеуказанного.

В моем случае, как вы можете видеть, я использую Redux для отслеживания состояния пользователя, вошедшего в систему.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector