配置 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>