Question

我有一个正在使用的应用程序，我想用密码保护所有页面我有页眉导航栏和页脚当我使用受保护的路由类执行此操作（如果邮件和密码很好）时，会将我重定向到没有NavBar和标头的组件，只有组件如何保护显示所有页面

<ProtectedRoute exact path="/" component={analyticsDashboard} />

使用


import React from 'react'
import { Redirect } from 'react-router-dom'
import { is } from '@babel/types';
import AppRouter from '../Router';

class ProtectedRoute extends React.Component {

    render() {
        const Component = this.props.component;
        const isAuthenticated = localStorage.getItem('token');
        
        if(isAuthenticated==='0')
        {
            return <Redirect to={{ pathname: '/pages/login' }} />
        }
        return <Component/>
      
    }
}

export default ProtectedRoute;

感谢您告诉我，我可以在生产环境中使用哪种方法代替本地存储方式

Answer 1

您可以按照以下步骤创建HOC

要将令牌值设置为本地存储时，请首先调用此函数

// call this function in the root component when you want to set the token
function setLocalStorage (key, value) {
  const originalSetItem = localStorage.setItem;

  localStorage.setItem = function(key, value) {
    const event = new Event('itemInserted');
    event.value = value;
    event.key = key;
    document.dispatchEvent(event);
    originalSetItem.apply(this, arguments);
  };
}

第二，创建一个临时

import { Redirect } from 'react-router-dom'

export default function(ComposedComponent) {
  class Authentication extends Component {
    state = {
      isAuthenticated: !!localStorage.getItem('token')
    };

    localStorageSetHandler({ key, value }) {
      if (key !== 'token') return;

      this.setState(({
        isAuthenticated: !!value,
      }))
    }
    componentDidMount() {
      document.addEventListener("itemInserted", this.localStorageSetHandler, false);
    }

    render() {
      const { isAuthenticated } = this.state;

      if (!isAuthenticated) {
        return  <Redirect to={{ pathname: '/pages/login' }} />;
      }
      return <ComposedComponent />;
    }
  }
}

然后使用您创建的专案来创建受保护的路由，像这样

<Route
  path={'/path'}
  component={RequireAuth(lazy(() => import('./component path')))} // or you can use  component={RequireAuth(YourComponent)}
/>

React：保护页面与本地存储的反应

1 个答案: