java antd实现登录_Spring WebFlux + React搭建后台管理系统(3): antd pro v5实现登入登出...
antdpro是蚂蚁金服开发的后台管理框架模板,继承了许多组建,可以满足快速开发,组建使用的antd,组建种类比较多,功能比较全,设计也挺好看的,但是封装程度有点高,用起来可能不是很灵活,一些功能需要研究一下。
1. 创建antd项目
1.1 命令行键入:
yarn create umi
1.2 选择Pro v5:
这时项目文件全部拉下来了:
1.3 下载依赖
通过yarn下载,时间会比较长
yarn
1.4 运行项目
通过键入yarn start启动项目
通过浏览器访问,不要用ie,可见项目界面:
2. 登入实现
由于使用initialState, v5的login和v4的login的一些文件功能位置发生了变化,之前用的dva,现在也没了。
2.1 修改login的页面
找到login的页面以及功能页面
登录页面修改:只需要用户密码登录
const Login: React.FC = () => {
const [userLoginState, setUserLoginState] = useState({});
const [submitting, setSubmitting] = useState(false);
const { refresh} = useModel('@@initialState');
const handleSubmit = async (values: LoginParamsType) => {
setSubmitting(true);
try {
// 登录
const msg = await accountLogin({ ...values, type: 'account'});
if (msg.status === 200) {
message.success('登录成功!');
localStorage.setItem("token", msg.data.token);
localStorage.setItem("user", JSON.stringify(msg.data));
replaceGoto();
setTimeout(() => {
refresh();
}, 0);
return;
}
// 如果失败去设置用户错误信息
setUserLoginState({status: msg.status, type: 'account'});
} catch (error) {
message.error('登录失败,请重试!');
}
setSubmitting(false);
};
const { status, type: loginType } = userLoginState;
return (
className={styles.logo}
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597756619654&di=614e6457d19facc70fc19d1a870fd65b&imgtype=0&src=http%3A%2F%2F09.imgmini.eastday.com%2Fmobile%2F20170805%2F20170805232157_105785d2963bb49429d4e5d92acb0368_7.jpeg"
alt="冰封王座"/>
{status === 'error' && loginType === 'account' && !submitting && (
)}
name="username"
placeholder="用户名: admin"
rules={[
{
required: true,
message: '请输入用户名!',
},
]}
/>
name="password"
placeholder="密码: admin"
rules={[
{
required: true,
message: '请输入密码!',
},
]}
/>
登录
);
};
通过accountLogin 方法登录获得token,以及用户信息
将token和用户信息放到localStorage中
跳转到之前页面或者 /页面
刷新刷新initialState,更新登录信息
2.2 添加login访问api服务
使用umi的request方法进行访问
注意文件位置
接口实现可以看一下之前系列文章
2.3 修改getInitialState方法
由于登录,鉴权都要使用getInitialState,默认方法CurrentUser中存放的是一个默认人的信息,需要变更为登录访问返回的个人信息:
该方法存在根目录的app.tsx中,修改如下:
为了配合CurrentUser使用可以把api传过来的字段名改一下
获取登入存储在localStorage中的user写入currentUser中
export async function getInitialState(): Promise
currentUser?: API.CurrentUser;
settings?: LayoutSettings;
}> {
// 如果是登录页面,不执行
if (history.location.pathname !== '/user/login') {
try {
const currentUser:API.CurrentUser = JSON.parse(localStorage.getItem('user')||'');
currentUser.access = currentUser.roles;
return {
currentUser,
settings: defaultSettings,
};
} catch (error) {
history.push('/user/login');
}
}
return {
settings: defaultSettings,
};
}
2.4 修改CurrentUser
为了配合使用,将原来的currentuser添加或修改了一些字段
添加mobile
添加token
添加roles
修改access类型为array,目前roles中和access中内容一样,之后有可能通过map获取access
2.5 修改鉴权功能
新版本鉴权通过access.ts文件完成鉴权逻辑
修改access方法
由于access已经让我改成列表,判断逻辑需要修改
到这里登录的过程就基本完成了。
3.登出实现:
登出的实现比较简单,下图为登出方法所在位置
修改loginout方法如下:
通过api将redis中token删除
删除掉localStorage中的token和user,这样getInitialState无法获取CurrentUser自然无法访问其他页面
outLogin方法修改
export async function outLogin(token: string) {
return request('http://localhost:8080/api/auth/logout', {
method: 'GET',
params: {token},
}).then((response) => {
return response;
}).catch((error) => {
console.log(error);
});
}
4. 测试
5. 项目代码
java antd实现登录_Spring WebFlux + React搭建后台管理系统(3): antd pro v5实现登入登出...相关推荐
- 使用bootstrap搭建后台管理系统页面《一》
1. 使用bootstrap搭建后台管理系统页面<一> 一般的后台管理系统页面主体包括四个部分,顶部导航栏,左侧菜单栏,中间正文页和底部的页脚. 其中左侧和顶部使用的是bootstrap的 ...
- Vue学习笔记: Vue + Element-ui搭建后台管理系统模板
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板 技术:Vue + Element-ui 功能:后台管理系统基础模板,路由配置,加载页面进度条,请求响应拦截器的封装等 页面预览: ...
- 使用bootstrap搭建后台管理系统页面《二》
1.使用bootstrap搭建后台管理系统页面<二> 这次不需要另外写css.直接完全引用bootstrap下的样式. 完成以后的效果: 源代码: <%@ page language ...
- 使用node搭建后台管理系统(1)
使用node搭建后台管理系统 1.搭建项目结构 2.装包 3.要实现的效果 登录页面 登录成功后的管理页面 查找学生功能 编辑学生功能 添加学生功能 删除学生功能 以下两个步骤在我之前的文章中已经操作 ...
- Vue3+TS+Vite+Element Plus搭建后台管理系统
Vue3+TS+Vite+Element Plus搭建后台管理系统 1.简介 2.效果图 3.技术栈 4.项目目录 5.setting.js(全局配置文件) 6.路由router 7.状态管理stor ...
- 手把手带你使用uni-admin搭建后台管理系统
我们一般写应用都需要有后台管理系统,那么uni-app也不例外. 本次内容假设我们已经完成了一个uni-app+uniCloud开发的程序. 默认我们已经搭建好了服务空间. 我们的视频教程(免费)链接 ...
- react+antd搭建后台管理系统
文章目录 前言 一.效果图 二.框架内容 1.技术栈 2.项目目录 3.setting.js(全局配置文件) 4.跨域代理 5.路由react-router 6.状态管理 react-redux 下载 ...
- 使用react实现后台管理系统项目
一.开发React必须依赖三个库 1.react:包含react所必须的核心代码 2.react-dom:react渲染在不同平台所需要的核心代码 3.babel:将jsx转换成React代码的工具 ...
- androidstudio做登录界面_Vue-cli+Element-ui实现后台管理系统(二)实现后台登录功能...
前言 接上文,本文主要讲解vue+element-ui后台管理系统的登录功能的实现,api接口这块如果对后端技术以及node的实现不太了解的情况下,可以写出假数据进行模拟操作~ 一.创建登录文件并配置 ...
最新文章
- PingingLab传世经典系列《CCNA完全配置宝典》-5.8 静态NAT
- react学习(65)--ant design加载中
- 几款浏览器JavaScript调试工具
- label居中_表格固定列宽时如何居中?
- 退休的姐妹们,你们还打工吗?
- golang控制台颜色输出(for windows)
- “盛大游戏杯”第15届上海大学程序设计联赛夏季赛暨上海高校金马五校赛:I. 丢史蒂芬妮
- 移除mac下 .Ds_Store的解决办法
- java scanner以回车结束_大佬看了直呼内行,你当初Java刚入门是否也是这样写代码?...
- HNUCM 1284:二叉树遍历
- ubuntu dos转linux命令行,Ubuntu下代替dos2unix命令
- android车机升级carplay,现代增加支持DIY升级CarPlay,Android Auto的车型
- 程序员一毕业就年薪 110 万竟然是靠……
- c语言二维指针类型转换,二维数组和指针(C语言)
- python十六进制字符码转中文
- python如何给某列数据打标签_Python map, apply, transform 打标签方法汇总(初阶到高阶)...
- 埃隆 · 马斯克、山姆 · 奥特曼和 OpenAI 的秘史
- C# 金额转中文大写
- thingsboard物联网平台编译安装一步到位
- AMT说产业互联网络
热门文章
- 童言无忌的最高境界(笑到抽筋)
- 哦!这该死的 C 语言
- vs2010创建Dll例子,并解决运行错误:应用程序正常初始化(0xc000000d)失败。请单击“确定”,终止应用程序。
- 镜像网络MW测试网客户端升级公告
- 英语知识点整理day08-谚语学习(A字母开头)
- 云服务器装win 10系统,云服务器可以安装win10吗
- 9行Python代码去除图片中的数字水印
- 一款功能强大的磁盘工具箱—parted magic 2020
- 腾讯:QQ帐号注销功能正灰度体验中 预计下周正式发布
- 用JavaScript实现贪吃蛇游戏_艾孜尔江撰