Аутентификация в ReactJS с использованием React-Router - PullRequest
Новая
       6

Аутентификация в ReactJS с использованием React-Router

0 голосов
/ 29 сентября 2018

У меня есть простой route.js файл 

const PrivateRoute = ({ component, ...rest }) => {
  const isAuthed = localStorage.getItem('Authorization')
  return (
    <Route {...rest} exact
      render = {(props) => (
        isAuthed ? (
          <div>
            {React.createElement(component, props)}
          </div>
        ) :
        (
          <Redirect
            to={{
              pathname: '/login',
              state: { from: props.location }
            }}
          />
        )
      )}
    />
  )
}
class App extends Component {
  componentWillMount() {
    if (localStorage.getItem('Authorization')) {
      history.push(`${history.location.pathname}`)
    }
  }

  render() {
    return (
      <Router history={history}>
        <div className="App-pageContainer">
          <Route exact path="/" render={() => <Redirect to="/login" />} />
          <Route path={'/login'} component={Login} />
          <PrivateRoute path={'/dashboard'} component={Dashboard} />
        </div>
      </Router>
    )
  }
}
export default App

Мне нужно поставить условие, если у пользователя есть ключ в localStorage (Authentication), тогда я хочу перенаправить его на /dashboardесли он не содержит Authentication в localStorage, то я хочу перенаправить его на /login.

Я полностью застрял в этом за последние несколько дней.Пожалуйста, помогите !!!

1 Ответ

0 голосов
/ 29 сентября 2018

Я думаю, что такого рода вопросы слишком широки для ответа.

Однако, вы можете следить за этим удивительным постом, чтобы иметь возможность реализовать эту функцию.

Защищенные маршруты иаутентификация с React Router v4

Это то, что вы получили после окончания 

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link,
  Redirect,
  withRouter
} from 'react-router-dom'

const fakeAuth = {
  isAuthenticated: false,
  authenticate(cb) {
    this.isAuthenticated = true
    setTimeout(cb, 100)
  },
  signout(cb) {
    this.isAuthenticated = false
    setTimeout(cb, 100)
  }
}

const Public = () => <h3>Public</h3>
const Protected = () => <h3>Protected</h3>

class Login extends React.Component {
  render() {
    return (
      <div>
        Login
      </div>
    )
  }
}

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => (
    fakeAuth.isAuthenticated === true
      ? <Component {...props} />
      : <Redirect to='/login' />
  )} />
)

export default function AuthExample () {
  return (
    <Router>
      <div>
        <ul>
          <li><Link to="/public">Public Page</Link></li>
          <li><Link to="/protected">Protected Page</Link></li>
        </ul>
        <Route path="/public" component={Public}/>
        <Route path="/login" component={Login}/>
        <PrivateRoute path='/protected' component={Protected} />
      </div>
    </Router>
  )
}
...