一、阶段性工作复盘

1.业务流程

业务流程描述：
1)用户输入网址(域名)
2)判定浏览器本地有无认证的用户信息
3)本地有记录认证过的权限用户信息，则跳转至网址首页；反之则跳转到登录界面，让用户登录
4)用户成功登录后，本地记录相关权限认证信息(一般会有超时策略等)，并跳转至网站首页或者历史的url对应的界面

2.问题处理记录小结

1.loader和action的作用及用法，参考官方文档进行使用
2.VS code支持TypeScript语法高亮，但工程未安装typescript，导致工程启动时无法识别*.tsx文件
3.安装支持TypeScript后，又导致无法兼容*.js和*.jsx文件，故需对tsconfig.json进行相应配置
4.安装antd4.x后，发现Button组件样式未生效，需在全局导入相关样式文件，且每个版本的antd文件配置不一样
5.工程目前不支持热启动，即保存变更重启，需"Control+C"关闭工程后重启，否则一些更改可能不生效
6.共用的layout，前端路由对应的page，需使用<Outlet>组件来呈现

3.目前已实现功能简述

1.layout样式实现
2.layout上支持用户点击菜单，切换到对应的page
3.前端路由实现，未授权跳转至登录页面(通过react-router-dom提供的loader机制实现)，登录成功跳转主页面还未实现

二、用户登录登出功能实现

1.功能简述

1.登录界面开发，样式调整
2.登录成功后，跳转至管理系统主界面
3.未授权的用户，或者用户登录超期后跳转至登录页面
4.用户选择登出后，跳转至登录界面

2.具体实践

2.1 登录界面

参考antd4的表单，粘贴复制后，根据自己的项目进行微调即可实现一个登录Form表单新建pages/login/index.tsx，代码内容实现如下：

具体的样式和文字等，可根据自己的项目进行修改；需注意点如下：
1.通常登录界面都要设置相关背景图等，推荐的是使用svg格式的图片；如果使用jpg等图片，需要配置图中所示的样式
2.点击登录后，通常会向后端发起用户登录请求，认证成功后，会跳转至系统主界面，此处使用react-router-dom提供的useNavigate钩子函数，当点击登录且通过后端认证后，返回一个navigate("/home")对象，即可以实现登录后自动跳转的效果

1.非代码文件资源识别问题

使用yarn create react-app或者npx create-react-app创建的react脚手架工程项目，在js或者jsx中，是可以直接使用如下语句使用非代码文件资源的：

import logo from "../logo.svg" 
<img src={logo} alt="logo" />

但是在tsx的文件中是无法识别的，也就是说TypeScript中是无法直接识别和使用非代码文件的，需要经过配置;直接使用会报错"Cannot find module '../logo.svg' or its corresponding type declaration";TypeScript配置识别非代码资源文件，参考如下：juejin.cn/post/701698…, 即在scr/目录文件夹下，新建images.d.ts文件，react自动加载里面的配置