©2020-2024 ioDraw All rights reserved
<>vue Implement login _ obtain token_ Pull user information _ Background management system series
<> One , Connect the previous packaging and cross domain articles to simply carry out the login page function
Here's the old one ;
<> The first step
// Encapsulated interface file , Get a simulated interface import { login } from './API_TYPE' // Encapsulated axios Of post method
import { POST } from './request' Here, an anonymous function is thrown by default and ready to receive * user name * and * password * export default
function (username, password) { // Back to this post method , In this way, the return value of the whole function is still one promise object return
POST(login, { username, password }) }
file name ：login.js
I wrote the above code into a file , This file is only used for this method ; You can also throw multiple methods from one file ;
<> Step two
Then encapsulate a file to get user information
file name ：getUserInfo.js
// Encapsulated axios Of get method import { GET } from './request' // obtain info The interface used in the design import { info
} from './API_TYPE' // Send a message to the server here token Just fine , What the server relies on to find data is token
//token The user name and password are returned by the server after the server verifies successfully export default function (token) { return
GET(info, token) }
The layout here is used by the team element-ui
<template> <div class="home"> <el-form label-width="80px" :model="form"
:rules="rules" ref="rulesForm"> <h2 class="login_title"> Member management system </h2>
<el-form-item label=" account number " prop="username"> <el-input v-model="form.username"
placeholder=" enter one user name "></el-input> </el-form-item> <el-form-item label=" password "
prop="password"> <el-input type="password" v-model="form.password"
placeholder=" enter one user name "></el-input> </el-form-item> <el-form-item> // Events triggered at login
<el-button type="primary" @click="submitForm('rulesForm')"
:plain="true"> Sign in </el-button> </el-form-item> </el-form> </div> </template>
<script> // Just packaged login method import Login from "../API/Login"; // Just packaged GetUsetInfo method
import GetUserInfo from "../API/GetUsetInfo"; export default { name: "Home",
data() { return { // Two way password binding of account form: { username: "", password: "" }, // Verification of account and password
The verification can be referred to element Document of form component rules: { username: [ { required: true, message: " Account number cannot be empty ",
trigger: "blur" } ], password: [{ required: true, message: " Password cannot be empty ", trigger:
"blur" }] } }; }, methods: { // Method triggered by login submitForm(formName) { //
console.log(this.$refs[formName].validate); // This is element-ui A verification method of the model
this.$refs[formName].validate((valiType, errorMessage) => { if (valiType)
{// Verification successful //login Method , Get the callback data Login(this.form.username,
this.form.password).then(response => { console.log(response.data); const res =
response.data; // Here, verify the authentication credentials returned by the server if (res.data.code === 200) {
// Local storage of what we got token, Easy to get information later window.localStorage.setItem("token",
res.data.data.token); // use GetUserInfo Method import token; Execute callback ; The callback returns the user's information
GetUserInfo(res.data.data.token).then(response => {
console.log(response.data.data.data); window.localStorage.setItem(
// Store some information of users to local "userPermission", JSON.stringify(response.data.data.data) );
// This is element-UI A prompt box for this.loginY(); // Jump to the page after successful login
this.$router.push("/layout"); }); } else { console.log(" Message return error "); return false;
} }); } else {// Validation failed console.log("error:", errorMessage); return false; } });
}, loginY() { this.$message({ message: " congratulations , Successful login !", 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>
thus ; After landing in the page according to the user's information rendering avatar user name and other data
Key parts of the code have been annotated
<> The logic of the background management system will be continuously updated later
Technology