登录页面业务逻辑实现

登录的业务逻辑

1.输入用户名和密码，获取token（服务器去数据库查询用户名和密码是否正确，正确则返回一个token）

2.通过token返回用户信息

3.存储token和用户信息

4.跳转主页面

token:

1、Token的引入：Token是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示，在这样的背景下，Token便应运而生。

2、Token的定义：Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。

3、使用Token的目的：Token的目的是为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。

代码：

  this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          //交给后台去验证
          login(this.form.username, this.form.password).then((res) => {
            console.log('res', res.data);
            const resp = res.data;

            if (resp.flag) {
              //  验证成功 通过token获取用户信息
              getUserInfo(resp.data.token).then((res) => {
                const userData = res.data;
                console.log(userData.flag);
                if (userData.flag) {
                  console.log('data', userData);
                  // 保存token，用户信息
                  localStorage.setItem(
                    'mxg-msm-user',
                    JSON.stringify(userData.data)
                  );
                  localStorage.setItem('mxg-msm-token', resp.data.token);
                  //跳转页面
                  this.$router.push('/');
                } else {
                  this.$message({
                    message: userData.message,
                    type: 'warning'
                  });
                }
              });
            } else {
              // 未通过弹出警告
              this.$message({
                message: resp.message,
                type: 'warning'
              });
            }
          });
        } else {
          console.log('验证失败');
          return false;
        }
      });

[Object object]--------转换string -》JSON.Stringifi()

路由跳转-》this.$router.push('/')