借助Vite、React、TypeScript、React Hook、Mobx，从零开始构建前端应用，实现路由权限控制

前端

2024-01-20 19:01:24

利用 Vite、React、TypeScript 和 MobX 构建前端应用并实现路由权限控制

简介

在现代前端开发中，使用强大的工具和框架至关重要。本文将指导您使用 Vite、React、TypeScript、React Hook 和 MobX 从头开始构建一个前端应用程序，并实现基于路由的权限控制。

技术栈简介

Vite： 一个用于构建前端应用程序的快速且灵活的工具，它可以快速编译和打包 JavaScript 代码。
React： 一个流行的 JavaScript 库，用于创建交互式和响应式用户界面。
TypeScript： 一种强类型的编程语言，可提供静态类型检查和更好的代码健壮性。
React Hook： 一种在 React 中用于创建和管理组件状态的新特性。
MobX： 一个状态管理库，用于简化组件状态管理。

从零开始构建前端应用

1. 项目初始化

npx create-vite-app vite-react-mobx-admin

2. 安装依赖项

yarn add react react-dom typescript @types/react @types/react-dom

3. 创建组件

// App.tsx
import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Hello Vite + React + TypeScript + Mobx!</h1>
    </div>
  );
};

export default App;

4. 运行应用程序

yarn dev

实现路由权限控制

1. 安装依赖项

yarn add react-router-dom

2. 创建路由

// App.tsx
import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

3. 创建权限控制组件

// Auth.tsx
import React, { useState } from 'react';
import { Navigate } from 'react-router-dom';

const Auth = ({ children }) => {
  const [authed, setAuthed] = useState(false);

  if (!authed) {
    return <Navigate to="/login" />;
  }

  return children;
};

export default Auth;

4. 使用权限控制组件

// Home.tsx
import React from 'react';
import Auth from './Auth';

const Home = () => {
  return (
    <Auth>
      <h1>Home</h1>
    </Auth>
  );
};

export default Home;