©2020-2024 ioDraw All rights reserved
<>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>
至此；在登陆后的页面根据用户的信息渲染头像用户名等数据即可
代码的关键部分已经打上注释
<>后面会持续更新关于后台管理系统方面的逻辑