react项目搭建和基本配置

1. 使用CRA创建项目

npx create-react-app react-jike

清除目录中不需要的文件 

2.安装scss

npm install sass -D

3.安装Ant Design 组件库 安装成功

npm install antd --save  

4.配置基础路由Router

配置步骤

1. 安装路由包 react-router-dom

2. 准备基础路由组件（任意的页面都可以，一般都包括login，layout等）

3. 在router/index.js文件中引入组件进行路由配置， 导出router实例

4. 在入口文件中渲染 <RouterProvider/> ，传入router实例

ReactRouter官方网址：

https://reactrouter.com/en/main

5.配置@别名路径

1.首先安装 craco配置，，安装完了之后重新npm run start 运行项目

命令：npm i @craco/craco -D

2. 针对路径转换，修改webpack别名路径配置 craco，文件名：craco.config.js

// 扩展webpack配置
const path = require('path')

module.exports = {
  // webpack 配置
  webpack: {
    // 配置别名
    alias: {
      // 约定：使用 @ 表示src 文件所在路径
      '@': path.resolve(__dirname, 'src')
    }
  }
}

配置好了之后引入文件的时候就可以使用@符号来引入了

3. 针对联想提示，修改VSCode配置 jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

效果图如下：刚开始的时候这个效果图并没有出来，关闭vscode之后，重新打开效果图就出来了，所以这样配置没有问题

6.使用gitee管理项目

1. 在gitee上初始化一个空项目仓库

基于craco创建的项目已经在本地初始化好了一个项目了、

如果提示没有初始化，直接git init即可

2. 把远程仓库和本地仓库关联

git remote add origin https://gitee.com/liaowenfeng1/react-jike.git

3. 提交代码到远程仓库

git add .
git commit -m 'first commit'
git push 
// 初次提交会提示这个，跟着提示写上命令即可
git push --set-upstream origin master

注意：父路径不要git init 初始化，否则会报错，本地仓库的文件提交不到远程仓库里面去

7.封装request请求模块

1. 几乎所有的接口都是一样的接口域名

2. 几乎所有的接口都需要设置一样的超时时间

3. 几乎所有的接口都需要做Token权限处理

8.使用Redux管理token

npm i react-redux @reduxjs/toolkit --legacy-peer-deps
//忽略了安装包时node版本不匹配的冲突 --legacy-peer-deps

9.登录-Token持久化

现存问题

Redux存入Token之后如果 刷新浏览器， Token会丢失（持久化就是防止刷新时丢失Token）

问题原因

Redux是基于浏览器内存的存储方式，刷新时状态恢复为初始值（在没有持久化存储之前：我的理解是既然是基于浏览器存储的，而token是点击登录页当中的登录按钮之后存入到redux当中的，当我点击登录进入首页之后，再次刷新，本地没有存储，token为空字符串，而首页也并没有获取token的地方，token没有存储到redux，只有登录页才有，在登录页时点击按钮token才能存储到redux，所以首页刷新之后，token会消失，为一个空字符串）

const userStore = createSlice({
  name: 'user',
  // 数据状态
  initialState: {
    token: localStorage.getItem('token-key') || ''
  },
  // 同步修改方法
  reducers: {
    setToken(state, action) {
      // 这样写了既可以存在redux,又可以存在本地
      state.token = action.payload
      // localStorage
      localStorage.setItem('token_key', action.payload)
    }
  }
})

刷新之后的效果图：

登录-封装Token的存取删方法

对于Token的各类操作在项目 多个模块中都有用到 ，为了 共享复用 可以封装成工具函数

10.Axios请求拦截器注入Token

  const token = getToken()
  if (token) {
    config.headers.Authorization = `Bearer ${token}`  // 固定写法，必须这样做
  }

11.使用Token做路由权限控制

相关代码：

import { getToken } from "@/utils";
import { Navigate } from "react-router-dom";
function AuthRoute({ children }) {
  const token = getToken()
  if (token) {
    return <>{children}</>
  } else {
    return <Navigate to='/login' replace />
  }
}
export {
  AuthRoute
}

router/index.js

// 路由实例
const router = createBrowserRouter([
  {
    path: "/",
    element: <AuthRoute><Layout /></AuthRoute> // 有token的情况下就正常返回组件，可以用这种方法去处理多个路由组件
  },
  {
    path: "login",
    element: <Login />
  },
]);

在项目中引入normalize.css来重置样式

网址：Normalize.css: Make browsers render all elements more consistently.

npm install normalize.css

12.Layout-二级路由配置

新理解：在一个界面当中点击跳转的就是二级路由，就是当前页面当中还有其他需要跳转的就是二级路由了，如果完全换成了另外一个界面，那就是一级路由，比如说登录页，404页面等

13.Layout-根据当前路由路径高亮菜单

实现效果：页面在 刷新时 可以根据当前的路由路径让对应的左侧菜单高亮显示

（点击路由菜单，将他存到本地，刷新之后根据这个路由存取出来即可）

思路：

1. 获取当前url上的路由路径

2. 找到菜单组件负责高亮的属性，绑定当前的路由路径

  // 反向高亮
  // 1.获取当前路由路径
  const location = useLocation()
  console.log(location.pathname)
  const selectedKey = location.pathname
  // 获取到当前路由

菜单栏：

            <Menu
            mode="inline"
            theme="dark"
            selectedKeys={selectedKey}
            onClick={onMenuClick}
            items={items}
            style={{ height: '100%', borderRight: 0 }}></Menu>

14.Layout-展示个人信息

关键问题：用户信息应该放到哪里维护？

和Token令牌类似，用户的信息通常很有可能在多个组件中都需要 共享使用 ，所以应该放到 Redux中维护

15.Layout-退出登录实现

1. 提示用户是否确认要退出（ 危险操作，二次确认 ）

2. 用户确认之后清除用户信息（ Token以及其它个人信息，需要在退出登录时清除的 ）

3. 跳转到登录页（ 为下次登录做准备 ）

16.Layout-处理Token失效

什么是Token失效？

为了用户的安全和隐私考虑，在用户 长时间未在网站中做任何操作 且 规定的失效时间到达 之后，当前的Token就会失效 ，一旦失效，不能再作为用户令牌标识请求隐私数据

前端如何知道Token已经失效了？

通常在Token失效之后再去请求接口，后端会返回 401状态码， 前端可以监控这个状态做后续的操作

代码:

if (error.response.status === 401) {
    removeToken()
    router.navigate('/login')
    // 只写到这个地方的话，点击刷新，如果token失效了，会显示报错信息，存在本地当中的token数据被清除了，但是并没有跳转到首页，这是一个bug，后面强制刷新就可以解决了
    window.location.reload()
  }

错误显示：

API模块封装

Echarts组件封装实现