配置 Mock.js

网址：http://mengxuegu.com:7300/project/5eb936ec5a06b51372b130b7
当登录成功后，响应状态码 2000 和 token 值。token用来 认证
后面请求只要是成功的，状态码均为 2000， 这个是与后台接口的约定
请求URL： /user/login
请求方式： post
http://mengxuegu.com:7300/login

{
  "code": 2000, // 状态码
  "flag": true,
  "message": '验证成功',
  "data": {
    "token": "admin"
 }
}

添加响应用户信息模拟接口

请求URL： /user/info/{token}
请求方式： get
描述：响应用户信息

{
    "code": 2000,
    "flag": true,
    "message": '成功获取用户信息',
    "data": {
        "id|1-10000": 1,
        "name": "@cname",
        "roles": ["manager"]
   }
}

注意：路径中不能有空格，建完之后测试一下是否能成果

在easy mock 中搭建完登录接口后，开始配置.env.devlopment的环境

二、配置环境

三、搭建登录接口

request.js
request.js因为请求的是.env.devloment中的配置，所以没有改变

login.js
在api文件夹下面创建一个login.js和以前的test.js同级

import request from '@/utils/request'

// 导出普通函数
export function login(username, password) {
    return request({
        url: '/user/login',
        method: 'post',
        data: {
            username,
            password
        }
    })

}
export function getUserInfo(token) {

    return request({
        // 使用反单引号
        url: `/user/info/${token}`,
        method: 'get'
    })
} 

四、index.vue中效验

<template>
  <div class="login-container">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px" class="login-form">
      <h2 class="login-title">会员管理系统</h2>
      <el-form-item label="账号" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// 引入api/login
import {login, getUserInfo } from "@/api/login";
export default {
  data() {
    return {
      form: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "账号不能为空", trigger: "blur" }
        ],
        password: [{ required: true, message: "密码不能为空", trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 如果上面不等于空则验证
          login(this.form.username, this.form.password).then(response => {
            console.log(response);
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
.login-form {
  width: 350px;
  margin: 260px auto;
  background-color: #d0cfd9;
  /* rgb(208, 207, 217,0.8) */
  padding: 25px;
  border-radius: 20px;
}
.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
  /* 上一级的上一级采用../../ */
  background: url(../../assets/login11.jpg);
}
.login-title {
  color: #303133;
  text-align: center;
}
</style>

token值效验登录并跳转页面

1、验证token
2、存储信息到本地 （localStorage.setItem）
3、跳转页面
4、使用饿了么UI警告的弹出框

<template>
  <div class="login-container">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px" class="login-form">
      <h2 class="login-title">会员管理系统</h2>
      <el-form-item label="账号" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// 引入api/login
import { login, getUserInfo } from "@/api/login";
export default {
  data() {
    return {
      form: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "账号不能为空", trigger: "blur" }
        ],
        password: [{ required: true, message: "密码不能为空", trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 如果上面不等于空则验证,传入异步对象
          login(this.form.username, this.form.password).then(response => {
            console.log(response);
            const resp = response.data;
            //  如果返回的flag为true
            // {
            //   "code": 2000, // 状态码
            //   "flag": true,
            //   "message": '验证成功',
            //   "data": {
            //     "token": "admin"
            //   }
            // }
            if (resp.flag) {
              // 验证登录
              // 通过token获取用户信息
              // getUserInfo
              getUserInfo(resp.data.token).then(respon => {
                // 获取到用户信息
                const eeuu = respon.data;
                if (eeuu.flag) {
                  //在js中使用JSON.stringify()转化数据为json数据，不然就会出现[object,object]
                  var b = JSON.stringify(respon.data.data);
                  console.log("b" + b);

                  console.log("userInfo" + eeuu.data);
                  console.log("userInfo" + eeuu.message);

                  // 保存用户信息到本地
                  localStorage.setItem("jhj-user", b);
                  localStorage.setItem("jhj-token", resp.data.token);
                  // 前往首页
                  this.$router.push("/");
                } else {
                  this.$message({
                    message: eeuu.message,
                    type: "warning"
                  });
                }
              });
            } else {
              // 未通过
              // alert(resp.message);
              // 这个就是饿了么UI,弹出框
              this.$message({
                message: resp.message,
                type: "warning"
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
.login-form {
  width: 350px;
  margin: 260px auto;
  background-color: #d0cfd9;
  /* rgb(208, 207, 217,0.8) */
  padding: 25px;
  border-radius: 20px;
}
.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
  /* 上一级的上一级采用../../ */
  background: url(../../assets/login11.jpg);
}
.login-title {
  color: #303133;
  text-align: center;
}
</style>