Project prospects : The back-end management system is a must-have for the company. In the past few years, the scarcity of technical personnel made the back-end system very expensive. The rapid development of the IT industry in recent years has caused some small and medium-sized companies to write their own back-ends and maintain them. Maximize the benefits.
Today is a simple background login operation
Demonstration effect:
1
1. Page layout (Vue+Element Ui)
Second, the login process
1. Call the login interface
2. Login successfully:
3. Save the token
4. Jump to the homepage and give a success prompt
5. Fail: give an error prompt and let the user log in again.
Specific code:
Create a new folder to encapsulate axios
Package request
import axios from "axios";
const service = axios.create({
baseURL: "url地址",
timeout: 3000
});
//请求拦截器
service.interceptors.request.use(
function (config) {
//判断如果不是登录页，必须携带token到后端，才能正常返回数据
//判断如果不是login页，获取token,并通过请求头携带到后端
if (config.url !== 'login') {
const token = localStorage.getItem('token');
//设置请求头
config.headers['Authorization'] = token;
}
return config;
},
function(error) {
return Promise.reject(error);
}
);
//响应拦截器
service.interceptors.response.use(
function(response) {
return response;
},
function(error) {
return Promise.reject(error);
}
);
export default service;
Request interface api
import request from "./index";
export function login(data) {
// console.log('data::',data)
return request({
url: "login",
method: "POST",
data
});
}
Global route interception in main.js
//全局路由拦截
router.beforeEach((to, from, next) => {
console.log("from:", from);
console.log("to:", to);
if (to.meta.auth) {
const token = localStorage.getItem('token')
if (!token) {
next({
name: 'login',
query: {
redirect:to.fullPath }
})
} else {
next()
}
} else {
next();
}
})
Login page code
<template>
<div class="login_wrap">
<el-form
class="login_form"
label-position="right"
label-width="80px"
:model="userinfo"
:rules="loginRules"
>
<h1>用户登录</h1>
<el-form-item label="用户名" prop="username">
<el-input v-model="userinfo.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="userinfo.password" type="password"></el-input>
</el-form-item>
<el-button type="primary" class="login_btn" @click.prevent="handleLogin"
>登录</el-button
>
</el-form>
</div>
</template>
<script>
//引入登录接口
import {
login } from "@/http/api";
export default {
name: "login",
data() {
return {
userinfo: {
username: "",
password: ""
},
loginRules: {
username: [
{
required: true, message: "请输入用户名", trigger: "blur" },
{
min: 5, max: 20, message: "长度在 5 到 20个字符", trigger: "blur" }
],
password: [
{
required: true, message: "请输入密码", trigger: "blur" },
{
min: 5, max: 60, message: "长度在 5 到 20 个字符", trigger: "blur" }
]
}
};
},
methods: {
async handleLogin() {
/**
* 调用登录接口
* 成功：
* 保存token
* 跳转到首页，并给出成功的提示
* 失败：给出错误提示，让用户重新登录
*/
const res = await login(this.userinfo);
const {
meta: {
msg, status }
} = res.data;
if (status === 200) {
const {
token } = res.data.data;
localStorage.setItem("token", token);
//记住上次没有token要访问的页面地址，如果登录成功，再返回到上次要访问到页面
const {
redirect } = this.$route.query;
//如果直接登录，没有redirect,成功后直接跳转到home
if (!redirect) {
this.$router.push({
name: "Home" });
} else {
this.$router.push({
path: redirect });
}
this.$message({
message: msg,
type: "success"
});
} else {
this.$message({
message: msg,
type: "error"
});
}
}
}
};
</script>
<style lang="scss" scoped>
.login_wrap {
width: 100%;
height: 100%;
background: #072765;
}
.login_form {
width: 40%;
height: 260px;
padding: 30px;
background: #fff;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
h1 {
text-align: center;
margin: 10px 0;
}
}
.login_btn {
width: 100%;
}
</style>
Summary: The above is a process idea for a back-end management system to achieve login. For details, please implement it in conjunction with API
Welcome to join the group for technical discussions, group number: 954314851
