Bagaimana untuk melompat antara berbilang halaman sebagai tindak balas

Cara untuk melaksanakan lompatan antara berbilang halaman dalam React: 1. Perkenalkan "React-Router"; dalam satu fail dan eksport berbilang tatasusunan.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Bagaimana untuk melompat antara berbilang halaman sebagai tindak balas?

tindak balas lompatan berbilang halaman, menggunakan React-Router untuk melaksanakan pengesahan penghalaan bahagian hadapan

React-Router ialah bahagian yang sangat penting dalam Cincin ekosistem React, kini penghalaan aplikasi satu halaman React pada asasnya diuruskan oleh bahagian hadapan itu sendiri, tidak seperti penghalaan bahagian belakang sebelum ini Pustaka yang biasa digunakan untuk React untuk mengurus penghalaan ialah React-Router. Artikel ini ingin menulis tentang penggunaan React-Router, tetapi hanya memperkenalkan API adalah terlalu biasa, dan dokumentasi rasmi telah ditulis dengan baik saya akan menggunakan senario pembangunan biasa untuk melihat cara React-Router digunakan. Sistem umum kami mempunyai sekatan ke atas kebenaran akses pengguna, dan sesetengah halaman mungkin memerlukan pengguna mempunyai kebenaran tertentu untuk mengakses. Artikel ini menggunakan React-Router untuk melaksanakan model pengesahan bahagian hadapan.

Contoh aplikasi

Fungsi yang akan dilaksanakan dalam artikel ini adalah senario yang sering dihadapi oleh semua orang, iaitu mengawal peranan pengguna yang berbeza untuk mengakses halaman yang berbeza empat kesemuanya di sini Halaman:

/index
/login
/backend
/admin

Terdapat juga tiga peranan:

• 未登录用户: Hanya boleh mengakses laman utama laman web /index dan log masuk Halaman /login

• 普通用户: Anda boleh mengakses laman utama tapak web /index, halaman log masuk /login dan halaman belakang /backend

• 管理员: Boleh mengakses halaman pengurusan /admin dan semua halaman lain

Pengenalan React-Router

Untuk melaksanakan pengesahan laluan, Kami perlu pergi selangkah demi selangkah Kami mula-mula menggunakan React-Router untuk membina projek mudah dengan halaman ini. Kami terus menggunakan create-react-app untuk mencipta projek baharu, dan kemudian mencipta folder pages dan meletakkan halaman yang kami nyatakan sebelum ini di dalamnya:

halaman kami Mari buatnya mudah dahulu. Mari kita tulis tajuk dahulu, seperti ini:

import React from 'react';

function Admin() {
  return (
    <h1>管理员页面</h1>
  );
}

Halaman lain serupa.

Kemudian kami boleh memperkenalkan App.js dalam React-Router untuk melakukan lompatan penghalaan. Harap maklum bahawa kami menggunakan react-router-dom pada penyemak imbas versi baharu React-Router menggabungkan lapisan logik teras dan lapisan pembentangan . Dipisahkan, logik teras akan mengendalikan padanan laluan, dsb., dan lapisan pembentangan akan mengendalikan lompatan sebenar dan memantau perubahan laluan Sebab pemisahan ini ialah React-Router bukan sahaja perlu menyokong pelayar, tetapi juga perlu menyokong React Native Kedua-dua ini Pemantauan dan lompatan setiap platform adalah berbeza, jadi kini terdapat beberapa pakej di bawah React-Router:

react-router: pemprosesan logik teras, menyediakan beberapa kelas asas biasa

react-router-dom: Pelaksanaan khusus pemantauan dan lompatan penghalaan berkaitan penyemak imbas

react-router-native: Pelaksanaan khusus pemantauan dan lompatan penghalaan berkaitan RN

Dalam penggunaan sebenar, kami biasanya tidak memerlukan Daripada memetik react-router, hanya gunakan react-router-dom secara langsung, kerana ia akan memetik react-router dengan sendirinya. Seterusnya kami memperkenalkan react-router-dom ke dalam projek.

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";
import Home from './pages/Home';
import Login from './pages/Login';
import Backend from './pages/Backend';
import Admin from './pages/Admin';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/login" component={Login}/>
        <Route path="/backend" component={Backend}/>
        <Route path="/admin" component={Admin}/>
        <Route path="/" component={Home}/>
      </Switch>
    </Router>
  );
}

export default App;

Kemudian anda boleh menggunakan Home pada halaman Link untuk menambah pautan untuk melompat ke halaman lain, supaya anda boleh melompat:

import React from 'react';
import { Link } from 'react-router-dom';

function Home() {
  return (
    <>
      <h1>首页</h1>
      <ul>
        <li><Link to="/login">登录</Link></li>
        <li><Link to="/backend">后台</Link></li>
        <li><Link to="/admin">管理员</Link></li>
      </ul>
    </>
  );
}

export default Home;

Kini aplikasi kami berjalan seperti ini:

模块划分

虽然我们的跳转实现了，但是所有人都可以访问任何页面，我们前面的需求是要根据登录的角色限制访问的页面的，在写代码前，我们先来思考下应该怎么做这个。当然最直观最简单的方法就是每个页面都检测下当前用户的角色，匹配不上就报错或者跳回首页。我们现在只有几个页面，这样做好像也还好，但是如果我们的应用变大了，页面变多了，每个页面都来一次检测就显得很重复了，所以我们应该换个角度来思考这个问题。

仔细一看，其实我们总共就三种角色，对应三种不同的权限，这三个权限还有层级关系，高级别的权限包含了低级别的权限，所以我们的页面也可以按照这些权限分为三种：

公共页面
普通页面
管理员页面

为了好管理这三种页面，我们可以将他们抽取成三个文件，放到一个独立的文件夹 routes 里面，三个文件分别命名为 publicRoutes.js ， privateRoutes.js ， adminRoutes.js ：

对于每个路由文件，我们可以将这类路由组织成数组，然后 export 出去给外面调用，比如 publicRoutes.js ：

import Login from '../pages';
import Home from '../pages/Home';

const publicRoutes = [
  {
    path: '/login',
    component: Login,
    exact: true,
  },
  {
    path: '/',
    component: Home,
    exact: true,
  },
];

export default publicRoutes;

然后我们外面使用的地方直接改为：

import publicRoutes from './routes/publicRoutes';

function App() {
  return (
    <Router>
      <Switch>
        {publicRoutes.map(
          ({path, component, ...routes}) => 
            <Route key={path} path={path} component={component} {...routes}/>
        )}
        <Route path="/backend" component={Backend}/>
        <Route path="/admin" component={Admin}/>
      </Switch>
    </Router>
  );
}

这样我们的 App.js 里面就不会有冗长的路由路由列表了，而是只需要循环一个数组就行了。但是对于需要登录才能访问的页面和管理员页面我们不能直接渲染 Route 组件，我们最好再封装一个高级组件，将鉴权的工作放到这个组件里面去，这样我们普通的页面在实现时就不需要关心怎么鉴权了。

封装高级组件

要封装这个鉴权组件思路也很简单，前面我们将 publicRoutes 直接拿来循环渲染了 Route 组件，我们的鉴权组件只需要在这个基础上再加一个逻辑就行了：在渲染真正的 Route 组件前先检查一下当前用户是否有对应的权限，如果有就直接渲染 Route 组件，如果没有就返回某个页面，可以是登录页或者后台首页，具体根据自己项目需求来。所以我们的路由配置文件 privateRoutes.js ， adminRoutes.js 里面的路由会比 publicRoutes.js 的多两个参数：

// privateRoutes.js
import Backend from '../pages/Backend';

const privateRoutes = [
  {
    path: '/backend',
    component: Backend,
    exact: true,
    role: 'user',       // 当前路由需要的角色权限
    backUrl: '/login'   // 不满足权限跳转的路由
  },
];

export default privateRoutes;

adminRoutes.js 是类似的写法：

// adminRoutes.js
import Admin from '../pages/Admin';

const adminRoutes = [
  {
    path: '/admin',
    component: Admin,
    exact: true,
    role: 'admin',       // 需要的权限是admin
    backUrl: '/backend'  // 不满足权限跳回后台页面
  },
];

export default adminRoutes;

然后就可以写我们的高级组件了，我们将它命名为 AuthRoute 吧，注意我们这里假设的用户登录时后端API会返回给我们当前用户的角色，一个用户可能有多个角色，比如普通用户的角色是 ['user'] ，管理员的角色是 ['user', 'admin'] ，具体的权限验证逻辑要看自己项目权限的设计，这里只是一个例子：

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

function AuthRoute(props) {
  const {
    user: {
      role: userRole
    },
    role: routeRole,
    backUrl,
    ...otherProps
  } = props;

  // 如果用户有权限，就渲染对应的路由
  if (userRole && userRole.indexOf(routeRole) > -1) {
    return <Route {...otherProps} />
  } else {
    // 如果没有权限，返回配置的默认路由
    return <Redirect to={backUrl} />
  }
}

export default AuthRoute;

然后用我们的 AuthRoute 的渲染 adminRoutes 和 privateRoutes :

// ... 省略其他代码 ...

{privateRoutes.map(
  (route) => <AuthRoute key={route.path} {...route}/>
)}
{adminRoutes.map(
  (route) => <AuthRoute key={route.path} {...route}/>
)}

登录设置权限

在我们的 AuthRoute 里面用到了 user: { role } 这个变量，但是我们还没设置它。真实项目中一般是登录的时候后端API会返回当前用户的角色，然后前端将这个权限信息保存在一些状态管理工具里面，比如 Redux 。我们这里直接在 Login 页面写死两个按钮来模拟这个权限了，用户的配置就用根组件的 state 来管理了， Login 页面的两个按钮会改变对应的 state ：

import React from 'react';
import { Link } from 'react-router-dom';

function Login(props) {
  const {loginAsUser, loginAsAdmin, history} = props;

  const userLoginHandler = () => {
    loginAsUser();      // 调用父级方法设置用户权限
    history.replace('/backend');     // 登录后跳转后台页面
  }

  const adminLoginHandler = () => {
    loginAsAdmin();     // 调用父级方法设置管理员权限
    history.replace('/admin');     // 登录后跳转管理员页面
  }

  return (
    <>
      <h1>登录页</h1>
      <button onClick={userLoginHandler}>普通用户登录</button>
      <br/><br/>
      <button onClick={adminLoginHandler}>管理员登录</button>
      <br/><br/>
      <Link to="/">回首页</Link>
    </>
  );
}

export default Login;

到这里我们这个简单的路由鉴权就完成了，具体跑起来效果如下：

Ringkasan

• React-Router boleh digunakan untuk mengurus lompat laluan hadapan dan merupakan perpustakaan yang sangat penting dalam ekosistem React.

• React-Router Untuk menyokong kedua-dua penyemak imbas dan React-Native, ia dibahagikan kepada tiga pakej react-router pakej teras, react-router-dom pakej penyemak imbas, react-router-native sokongan React-Native . Tidak perlu memperkenalkan react-router apabila menggunakannya, anda hanya perlu memperkenalkan pakej platform yang diperlukan.

• Untuk laluan yang memerlukan kebenaran yang berbeza, kami boleh menyusunnya mengikut kategori dan membinanya ke dalam fail yang berasingan Jika tidak terdapat banyak laluan, kami boleh meletakkannya dalam satu fail dan mengeksport pelbagai tatasusunan.

• Untuk laluan yang memerlukan pengesahan, kami boleh menggunakan komponen lanjutan untuk merangkum logik pengesahan kebenaran halaman lain hanya perlu dikonfigurasikan dan tidak perlu risau tentang isu pengesahan sama sekali.

Kandungan artikel ini agak mudah untuk membiasakan diri dengan penggunaan React-Router, tetapi kita tidak boleh menggunakannya sahaja, kita juga perlu mengetahuinya. prinsip. Jika anda suka, anda boleh menyukainya dan mengikutinya!

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Bagaimana untuk melompat antara berbilang halaman sebagai tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!