Реагируйте: Визуализируйте другой компонент, если аутентифицирован на root

Question

Я пытаюсь изменить root моего приложения для отображения другого маршрутизатора, если пользователь проходит аутентификацию. (опубликуйте c маркетинговый сайт, затем приложение SAAS при входе в систему).

Мой текущий код:

class MainRouter extends React.Component {
    render() {
        if(isAuthenticated()) {
            return <AppRouter/>
        } else {
            return <FrontRouter/>
        }
    }
}

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

isAuthenticated:

export const isAuthenticated = () => {
    if(typeof window == 'undefined') {
        return false
    }

    if(localStorage.getItem('jwt')) {
        return JSON.parse(localStorage.getItem('jwt'))
    } else {
        return false;
    }
};

Answer 1

Подумайте об использовании состояния (в идеале с хуками или Redux, если вам удобно) для удержания JWT в памяти. Идея состоит в том, чтобы сохранить его сразу после входа в систему и сделать его доступным для использования через состояние компонента (или Redux). Затем при обновлении страницы состояние будет по-прежнему загружаться из localState или файлов cookie.

Вторичная точка, LocalStorage, может работать по-разному в разных браузерах, и в особенности в настройках конфиденциальности. Подумайте об использовании файлов cookie, а не localStorage, так как их использование более предсказуемо и согласованно, плюс риск безопасности более или менее одинаков. (пример кода ниже)

В-третьих, я настоятельно рекомендую перейти с компонентов на основе классов на компоненты на основе функций, чтобы воспользоваться преимуществами нового React API Hooks. Это гораздо более простой способ управления состоянием и экономия многих строк кода.

// library imports
import React from 'react';
// component imports
import AppRouter from './AppRouter';
import FrontRouter from './FrontRouter';

// main
export default function MainRouter({isAuthenticated}) {
    return isAuthenticated ? <AppRouter/> : <FrontRouter/>
}

Если isAuthenticated - это логическая переменная, созданная функцией React "useState" из родительского компонента, вы можете передать эту переменную. в компонент «MainRouter» и условно отображать «AppRouter» или «FrontRouter» (я использую троичный оператор вместо оператора «If / Else» для сохранения строк)

В этом случае файл родительского компонента будет выглядеть так:

// in ParentComponent.jsx
// library imports
import React, {useState} from 'react';
// component imports
import MainRouter from './MainRouter';
// main component
export default function ParentComponent() {
    // set state here
    const defaultState = false;
    const [isAuthenticated, setIsAuthenticated] =useState(defaultState);
    return (
        <div className="ParentComponent" >
            <MainRouter isAuthenticated={isAuthenticated} />
        </div>
    )
}

вспомогательная функция для получения файлов cookie от w3schools (https://www.w3schools.com/js/js_cookies.asp)

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}