本文已参与「新人创作礼」活动，一起开启掘金创作之路。
vue实现登录_获取token_拉取用户信息_后台管理系统系列
一、接上之前封装和跨域的文章来简单进行登录页面功能
这里接上之前的；
第一步
//封装好的接口文件、获取的是一个模拟的接口
import { login } from './API_TYPE'
//封装的axios的post方法
import { POST } from './request'
在这里默认抛出一个匿名函数并准备接收*用户名*和*密码*
export default function (username, password) {
//返回这个post方法，这样整个函数的返回值就还是一个promise对象
return POST(login, {
username,
password
})
}
文件名：login.js
上边代码我写成了一个文件，此文件仅作用这一个方法；也可以一个文件抛出多个方法；
第二步
再封装一个文件用来获取用户信息
文件名：getUserInfo.js
//封装的axios的get方法
import { GET } from './request'
//获取info时用到的接口
import { info } from './API_TYPE'
//这里向服务器发送一个token就好，服务器查找数据依靠的就是token
//token由用户名和密码在服务器验证成功后由服务器返回
export default function (token) {
return GET(info, token)
}
这里布局用到了饿了么团队推出的 element-ui
<template>
<div class="home">
<el-form label-width="80px" :model="form" :rules="rules" ref="rulesForm">
<h2 class="login_title">会员管理系统</h2>
<el-form-item label="账号" prop="username">
<el-input v-model="form.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item>
//登录时触发的事件
<el-button type="primary" @click="submitForm('rulesForm')" :plain="true">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
//刚刚封装的login方法
import Login from "../API/Login";
//刚刚封装的GetUsetInfo方法
import GetUserInfo from "../API/GetUsetInfo";
export default {
name: "Home",
data() {
return {
//账号密码的双向绑定
form: {
username: "",
password: ""
},
//账号密码的验证 验证可参考element表单组件的文档
rules: {
username: [
{ required: true, message: "账号不能为空", trigger: "blur" }
],
password: [{ required: true, message: "密码不能为空", trigger: "blur" }]
}
};
},
methods: {
//登录所触发的方法
submitForm(formName) {
// console.log(this.$refs[formName].validate);
//这是element-ui的一个验证方法
this.$refs[formName].validate((valiType, errorMessage) => {
if (valiType) {//验证成功
//login方法中传入获取的用户名密码，得到回调的数据
Login(this.form.username, this.form.password).then(response => {
console.log(response.data);
const res = response.data;
//这里验证服务器返回的验证凭据
if (res.data.code === 200) {
//本地保存我们获取的token，便于之后的获取信息
window.localStorage.setItem("token", res.data.data.token);
//使用GetUserInfo方法传入token；执行回调；回调便返回用户的信息
GetUserInfo(res.data.data.token).then(response => {
console.log(response.data.data.data);
window.localStorage.setItem(
//储存用户的一些信息到本地
"userPermission",
JSON.stringify(response.data.data.data)
);
//这是element-UI的一个提示框
this.loginY();
//跳转路由到登陆成功后的页面
this.$router.push("/layout");
});
} else {
console.log("信息返回错误");
return false;
}
});
} else {//验证失败
console.log("error:", errorMessage);
return false;
}
});
},
loginY() {
this.$message({
message: "恭喜你，登陆成功！",
type: "success"
});
}
}
};
</script>
<style lang="scss">
.home {
width: 100vw;
height: 100vh;
background: url(../assets/login.jpg);
overflow: hidden;
.el-form {
width: 340px;
margin: 160px auto;
padding: 25px 30px;
background: rgba(255, 255, 255, 0.8);
border-radius: 20px;
.login_title {
text-align: center;
padding: 20px;
color: #303133;
}
}
}
</style>
至此；在登陆后的页面根据用户的信息渲染头像用户名等数据即可
代码的关键部分已经打上注释
