Как скрыть часть приложения response. js от авторизованного пользователя?

Question

Я работаю над фронтенд-приложением, и большая его часть должна быть скрыта от неавторизованного пользователя. При использовании приложения реагирования по умолчанию (например, create-response-app) он объединяет все в один (почти) файл, а затем клиенты загружают его. Итак, у клиента есть содержимое всех компонентов.

Какой самый безопасный и удобный способ скрыть данные от клиента? Я хочу обслуживать внутреннее содержимое приложения только тогда, когда пользователь вошел в систему.

Answer 1

Единственный способ сделать это - использовать приложение для рендеринга на стороне сервера.

Вы не можете просто отправить часть своих файлов в зависимости от роли пользователя в приложении на стороне клиента.

Answer 2

Вы можете использовать пакет «response-router-dom» npm. Пример частного маршрута:

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { isLogin } from '../utils'; // return true if user logged in

const PrivateRoute = ({component: Component, ...rest}) => {
    return (
        // Show component only when the user is logged in
        // Otherwise, redirect the user to /signin page
        <Route {...rest} render={props => (
            isLogin() ?
                <Component {...props} />
            : <Redirect to="/signin" />
        )} />
    );
};

export default PrivateRoute;

Publi c Пример маршрута:

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { isLogin } from '../utils';

const PublicRoute = ({component: Component, restricted, ...rest}) => {
    return (
        // restricted = false meaning public route
        // restricted = true meaning restricted route
        <Route {...rest} render={props => (
            isLogin() && restricted ?
                <Redirect to="/dashboard" />
            : <Component {...props} />
        )} />
    );
};

export default PublicRoute;

Вместе:

import React, { Component } from 'react';
import './App.css';
import { BrowserRouter, Switch } from 'react-router-dom';
import Home from './components/Home';
import Dashboard from './components/Dashboard';
import SignIn from './components/SignIn';
import PrivateRoute from './components/PrivateRoute';
import PublicRoute from './components/PublicRoute';

class App extends Component {

  render() {
    return (
      <BrowserRouter>
        <Switch>
          <PublicRoute restricted={false} component={Home} path="/" exact />
          <PublicRoute restricted={true} component={SignIn} path="/signin" exact />
          <PrivateRoute component={Dashboard} path="/dashboard" exact />
        </Switch>
      </BrowserRouter>
    );
  }
}

export default App;

Кроме того, вы можете создавать сборку веб-пакета и вырезать фрагменты по одному маршруту (стр.)

Answer 3

В идеале, рендеринг на стороне сервера - это один из способов отправки клиентам отдельных частей приложения. Он обеспечивает контроль при выборе того, что будет доставлено клиентам. Второй способ - создать отдельные пакеты из веб-пакета или другого сборщика (clientA. html, clientA. js), (clientB. html, clientB. js) и обслуживать их на основе аутентификации или типа учетной записи. . Интерфейс чаще всего представляет собой просто слой представления MVC, а данные контролируются серверной частью.