如何向授权用户隐藏react.js应用程序的一部分

Question

我正在开发前端应用程序，其中大部分应该对未经授权的用户隐藏。当使用默认的react应用程序(如create-rect应用程序(时，它将所有内容捆绑在一个(几乎(文件中，然后客户端下载它。因此客户端拥有所有组件的内容。

向客户端隐藏数据最安全、最方便的方法是什么？我想只在用户登录时提供应用程序的内部内容。

Answer 1

实现这一点的唯一方法是使用服务器端渲染应用程序。

你不能只根据用户在客户端应用程序中的角色发送部分文件。

Answer 2

理想情况下，服务器端呈现是将应用程序的单独部分发送到客户端的一种方式。它提供了对选择交付给客户的内容的控制。第二种方法是从webpack或另一个bundler(clientA.html，clientA.js((clientB.html，clientB.js(创建单独的bundle，并根据身份验证或帐户类型为其提供服务。前端通常只是MVC的视图层，数据由后端控制。

Answer 3

您可以使用；react 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;

公共路线示例：

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;

此外，您可以通过路由(页面(创建webpack构建和剪切块