前言

今天整理一下登陆时的具体步骤，平时只做过账号密码登录的。

具体步骤：

1、布局

（1）整个背景为一张图片，如果想让整张图片铺满整个屏幕的话，需要做样式更改，可以在rest.css文件里写如下代码：

html,body{
    width: 100%;
    height: 100%;
}
#root{
    width: 100%;
    height: 100%;
}

加上这两个代码之后再设置图片占满整个屏幕

.login {
  width: 100%;
  height: 100%;
  background: url("images/bg.jpg");
  background-size: 100% 100%;
}

中间使用表格进行布局，引入antd Design的Form组件， 可以在<Form.Item>里配置<Input/>的输入规则，

把<Form/>组件用一个<div/>包裹起来，设置<div/>的样式如下表单即可居中：

 .login .login-header {
  height: 80px;
  background-color: rgba(21, 20, 13, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

注意：<Button> 的htmlType类型为submit

逻辑实现：

1、点击登陆按钮：输入用户名密码，点击会触发表单的onFinish事件，里面接受一个参数：values，values是个对象，键值是<Form.Item>的name属性值，键值是用户输入进去的值，该事件会自动对表单数据进行验证。

2、接下来调接口，给后台发送请求，并携带参数values，如果成功，会返回token，可能也会有用户的相关信息，如角色，或当前登录用户能够看到的页面路径组成的数组，把token存储到本地，把用户相关信息可以存储在内存中，即存储在一个js文件里

memoryUtils文件-用来保存内存中的数据模块

还是用了第三方工具store进行本地化存储

可以在登录组件中，利用token进行权限验证

判断是否有token并且有用户相关信息，有的话直接跳转到详情页

进入详情页的时候，也要进行一下权限验证

看内存中是否有token或者是否有用户相关信息，没有的话就重定向回登录页。

上面的user.role_id就相当于了token，因为是自己写的后台，后台没设置token

或者在App组件里写组建的路由守卫

本文出至：学新通技术网