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

Question

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

Я видел какое-то руководство, в котором используются защищенные маршруты, но я не знаюкак это реализовать.

Мой логин.js

import React, { Component } from 'react'
import { login } from './UserFunctions'

class Login extends Component {
    constructor() {
        super()
        this.state = {
            email: '',
            password: ''
        }

        this.onChange = this.onChange.bind(this)
        this.onSubmit = this.onSubmit.bind(this)
    }

    onChange(e) {
        this.setState({ [e.target.name]: e.target.value })
    }

    onSubmit(e) {
        e.preventDefault()

        const user = {
            email: this.state.email,
            password: this.state.password
        }

        login(user).then(res => {
            if (res) {
                this.props.history.push(`/profile`)
            }
        })
    }


    render(props) {
        return (
            <div className="container">
                <div className="row">
                    <div className="col-md-6 mt-5 mx-auto">
                        <form noValidate onSubmit={this.onSubmit}>
                            <h1 className="h3 mb-3 font-weight-normal">Please sign in</h1>
                            <div className="form-group">
                                <label htmlFor="email">Email Address</label>
                                <input type="email"
                                    className="form-control"
                                    name="email"
                                    placeholder="Enter Email"
                                    value={this.state.email}
                                    onChange={this.onChange}
                                />
                            </div>
                            <div className="form-group">
                                <label htmlFor="password">Password</label>
                                <input type="password"
                                    className="form-control"
                                    name="password"
                                    placeholder="Enter Password"
                                    value={this.state.password}
                                    onChange={this.onChange}
                                />
                            </div>
                            <button type="submit"
                                className="btn btn-lg btn-primary btn-block">
                                Sign in
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        )
    }
}

export default Login

Мой app.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, Redirect, withRouter } from 'react-router-dom'
import { Home } from './appcomponents/Home';
import { Stockin } from './appcomponents/Stockin';
import { Stockout } from './appcomponents/Stockout';
import { Asrsstock } from './appcomponents/ASRSstock';
import { Productinfo } from './appcomponents/Productinfo';
import { Productin } from './appcomponents/Productin';
import { Productout } from './appcomponents/Productout';
import { Stockreport } from './appcomponents/Stockreport';
import { Enrolling } from './appcomponents/Enrolling';
import { NoMatch } from './appcomponents/NoMatch';
//import { NavigationBar } from './components/NavigationBar';
import { Deleteuser } from './appcomponents/Deleteuser';
import decode from 'jwt-decode';

import Navigationbar from './components/Navbar'
import Landing from './components/Landing'
import Login from './components/Login'
import Register from './components/Register'
import Profile from './components/Profile'

function requireAuth(nextState, replace) {
  if (!loggedIn()) {
    replace({
      pathname: '/login'
    })
  }
}


class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Navigationbar />
          <Route exact path="/" component={Landing} />
          <div className="container">
            <Route exact path="/register" component={Register} />
            <Route exact path="/login" component={Login} />
            <Route exact path="/profile" component={Profile} />
            <Route exact path="/Home" component={Home} />
            <Route path="/Stockin" component={Stockin} />
            <Route path="/Stockout" component={Stockout} />
            <Route path="/Asrsstock" component={Asrsstock} />
            <Route path="/Productinfo" component={Productinfo} />
            <Route path="/Productin" component={Productin} />
            <Route path="/Productout" component={Productout} />
            <Route exact path="/Stockreport" component={Stockreport} onEnter={requireAuth} />
            <Route path="/Enrolling" component={Enrolling} />
            <Route path="/Deleteuser" component={Deleteuser} />
            <Route exact path="/Register" component={Register} />
            <Route component={NoMatch} />
          </div>
        </div>
      </Router>
    );
  }
}

export default App;

Я хочу иметь возможность перенаправить неавторизованного пользователя на страницу входа.Так что единственный способ для них получить доступ к защищенным страницам - войти в систему

Answer 1

/**
 *
 * PrivateRoutes
 *
 */
import React from 'react';
import { Redirect, Route } from 'react-router-dom';

// Utils

const PrivateRoutes = ({ component: Component, ...rest }) => {  
  var session_token=localStorage.getItem('token')

  return (
    <Route {...rest} render={props => (
     session_token !== null ? (
      < Component  {...props} />
      ) : (
            <Redirect to={{
              pathname: '/login',
              state: { from: props.location }
              }}
            />
          )
      )} 
    />
  )
};


export default PrivateRoutes;

Используйте этот компонент для защиты ваших маршрутов , например, вы можете называть свой компонент следующим образом

<PrivateRoutes exact path="/companies" name="Companies" component={props => <DefaultLayout {...props}/>} />

Answer 2

App.js

class App extends Component {
  // your logic for checking if user authorized to use protected route
  // lets imagine that it just stored in local state for simplicity
  state = {
    isAuth: false
  };

  render () {
    return (
      <BrowserRouter>
        <Switch>
          <Route path="/not-protected" component={NotProtectedPage} />
          {this.state.isAuth ? <Route path="/protected" component={ProtectedPage} /> : null}
          <Route path="/" component={NotFoundError} />
        </Switch>
      </BrowserRouter>
    );
  }
}

Если пользователь не авторизован, маршрут / защищенный никогда не будет обработан, поэтому даже если пользователь попытается получить доступ к этому маршруту напрямую, он не будет отображен, а вместо этого404 будет оказано.Если вы хотите показать страницу с отказом в доступе, замените null в троичном операторе на тот же маршрут, но с компонентом, который делает доступ запрещенным.

Answer 3

вы можете хранить токен пользователя и данные в локальном хранилище.

логин

localStorage.setItem("user", login_Api_Responce);

и установите условие для страницы аутентификации как

rendar() {
  let auth = localStorage.getItem('user');
  return(
    <React.Fragment>
    {
      !auth 
         ?
           this.props.history.push(`/login-page`);
         :
         <div>
            //auth page 
         </div>
    }
    </React.Fragment>
  );
}

Answer 4

Вы можете создать защищенный маршрут, как в этом примере

Вы можете использовать локальное хранилище для хранения JWT или для файлов cookie, это те же шаги

1- В вашем App.js

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Auth from './path/to/Auth';
import LogIn from './path/to/LogIn';
import NotProtected from './path/to/NotProtected';
import Protected from './path/to/Protected';


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {

    return (
        <BrowserRouter>
          <div>
            <Switch>
              <Route exact path="/login" component={LogIn} />
              <Route path="/not_protected" render={props => <NotProtected {...props} />} />
              <Route path="/protected" render={props => <Auth><Protected {...props} /></Auth>} />
            </Switch>
          </div>
        </BrowserRouter>
    );
  }
}

export default App;

2- In Auth.js

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import getJwt from './path/to/getJwt';

class Auth extends Component {
  constructor(props) {
    super(props);

    this.state = {
      Authenticated: false,
    };
  }

  componentDidMount() {
    const { history } = this.props;
    const jwt = getJwt();
    if (!jwt) {
      history.push('/login');
    } else {
      this.setState({ Authenticated: true });
    }
  }

  render() {
    const { children } = this.props;
    const { Authenticated } = this.state;
    if (Authenticated === false) {
      return (
        <div>loading....</div>
      );
    }
    return (
      <div>
        {children}
      </div>
    );
  }
}

export default withRouter(Auth);

3- В getJWT Helper

const getJwt = () => {
    return localStorage.getItem('jwt');
}

export default getJwt;

Вы можете удалить jwt из локального хранилища в log_out

localStorage.removeItem('jwt')