Как запретить пользователям доступ к веб-странице, изменив URL - PullRequest
Новая
       12

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

1 голос
/ 24 октября 2019

Используя API, который уже был создан, когда пользователь заходит на страницу входа, он может выбрать вход в систему или просто изменить URL-адрес с локального хоста 3000 на / dashboard, и он не перенаправляется обратно на страницу входа. Он должен быть доступен пользователю только при условии ввода имени пользователя и пароля. Попытка изменить код несколько раз, и даже рядовые пользователи, но все еще не могут заставить его не получить доступ к странице. Перезапущен снова с предыдущим кодом в попытке выяснить его, хотя я уверен, что я смотрю на ответ

Это сочетание Login.js, а затем в конце его PrivateRoute.js 

import axiosWithAuth from '../data/axiosWithAuth';
const Login = props => {


const [loginCreds, setLoginCreds] = useState({
    username: "",
    password: "",
    err: null
  });

  const handleChange = e => {

    setLoginCreds({

      ...loginCreds,
      [e.target.name]: e.target.value,
      err: null
    });
  };

  const login = () => {
    const proxy = "https://cors-anywhere.herokuapp.com/";
    const url = "https://pintreachbackend.herokuapp.com/api/auth/login";
    axiosWithAuth()
      .post(proxy +url , {
        username: loginCreds.username,
        password: loginCreds.password
      })
      .then(res => {
        localStorage.setItem("token", res.data.token);
        props.history.push("/dashboard");
        console.log(login)
      })
      .catch(err =>
        setLoginCreds({
          ...loginCreds,
          err: "Error logging in. Please try again."
        })
      );
  };

  const handleSubmit = e => {
    e.preventDefault();
    loginCreds.username === "" || loginCreds.password === ""
      ? setLoginCreds({
          ...loginCreds,
          err: "Please complete all login fields."
        })
      : login();
  };
  return (
    <div className="login-page">
    <form>
        <h4>Enter Login Creds</h4>
        <input
          type="text"
          name="username"
          placeholder="Enter username..."
          value={loginCreds.username}
          onChange={handleChange}
          autoComplete="username"
        />
        <input
          type="password"
          name="password"
          placeholder="Enter password..."
          value={loginCreds.password}
          onChange={handleChange}
          autoComplete="current-password"
        />
        <button onClick={handleSubmit}>Login</button>
        {loginCreds.err && (
          <div className="error-container">{loginCreds.err}</div>
        )}
      </form>
    </div>
  );
};
export default Login;  ~~~    










This is the PrivateRoute.js

    ~~~import React from "react";
    import { Route, Redirect } from "react-router-dom";
    import axiosWithAuth from "../data/axiosWithAuth";

    /*
    Private Route rules:
    1. It has the same API as <Route />.
    2. It renders a <Route /> and passes all the props through to it.
    3. It checks if the user is authenticated, if they are, it renders the 
    “component” prop. If not, it redirects the user to /login.
    */
    const PrivateRoute = ({ component: Component, ...rest }) => {
    // const Component = props.component

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

    export default PrivateRoute

Ответы [ 3 ]

0 голосов
/ 24 октября 2019

Вы можете использовать состояние, чтобы определить, аутентифицирован ли пользователь или нет, если нет, то перенаправить.
Например, 

this.state={
    loggedIn:false
}
render(){
    if(!this.state.loggedIn)
        return <Redirect to='/loginPage'>
    return <div>Is Logged in</div>
}

Для получения дополнительной информации вы можете google React router guard

0 голосов
/ 24 октября 2019

Вы можете обратиться к API-интерфейсу React.Context, который предназначен для поддержки подобных сценариев.

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

Для получения дополнительной информации см.

0 голосов
/ 24 октября 2019

Вы можете заменить BrowserRouter на MemoryRouter.

...