@d2207

Как делать редирект при авторизации?

Добрый день! В навбаре имеется две кнопки - логин или логаут. Логаут работает отлично, чего не скажешь о логине. Когда пользователь проходит авторизацию он должен попасть на некую страничку, но остаётся на стр авторизации. Как работает window.location.href = "/additem"? Выглядит так как будто это обычный reload(); без редиректа.
P/S: Это пет-прожект без бекенда с регистрацией и получением прав доступа, поэтому всё это имитирую на фронте.
LOGIN
export function Login() {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    
    function onChangeUsername(e) {
        setUsername(e.target.value)
    }

    function onChangePassword(e) {
        setPassword(e.target.value)
    }

    function getToken() {
        const token = Date.now().toString();
        if (username && password) {
            localStorage.setItem('userToken', JSON.stringify(token))
        }
        ChangeLocation()
    }

     function ChangeLocation() {
         window.location.href = 'http://localhost:3000/additem'
     }

    return (...)


LOGOUT
export function Navigbar() {
    const [currentUser, setCurrentUser] = useState(undefined);

    useEffect(() => {
        Authentication();
    });

    function Authentication() {
        setCurrentUser(localStorage.getItem('userToken'));
    }

    function LogOut() {
        localStorage.removeItem('userToken');
        ChangeLocation();
    }

    function ChangeLocation() {
        window.location.reload()
    }

    return (...)


ROUTE
return (
        <Switch>
            <Route exact path="/" render = {() => <Redirect to="/login"/>}/>
            <Route exact path="/login" component={Login}/>
            <Route path="/additem" render={() => isLoggedIn ? <AddItem/> : <Redirect to="/login"/>}/>
            <Route path="/edititem" render={() => isLoggedIn ? <EditUsers/> : <Redirect to="/login"/>}/>
            <Route path="/deleteitem" render={() => isLoggedIn ? <DeleteItem/> : <Redirect to="/login"/>}/>
            <Route exact path="/listOfItem" component={ListOfItems}/>
            <Route path="/listOfItem/:personId" component={ItemPage}/>
        </Switch>
    )
  • Вопрос задан
  • 245 просмотров
Пригласить эксперта
Ответы на вопрос 1
hzzzzl
@hzzzzl
import { Redirect } from "react-router-dom";

export function Login() {
    const [isAuthed, setIsAuthed] = useState(false)     // !

    function getToken() {
        const token = Date.now().toString();
        if (username && password) {
            localStorage.setItem('userToken', JSON.stringify(token))
            setIsAuthed(true)   // !
        }
    }

     if (isAuthed) return <Redirect to="/additem" />   //  !!!

    return (...)
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы