Perspectivas del proyecto : el sistema de gestión de back-end es imprescindible para la empresa. En los últimos años, la escasez de personal técnico encareció mucho el sistema de back-end. El rápido desarrollo de la industria de TI en los últimos años ha hecho que algunas pequeñas y medianas empresas escriban sus propios back-end y los mantengan. Maximice los beneficios.
Hoy es una simple operación de inicio de sesión en segundo plano
Efecto de demostración:
1
1. Diseño de página (Vue + Element Ui)
En segundo lugar, el proceso de inicio de sesión
1. Llame a la interfaz de inicio de
sesión 2. Inicie sesión correctamente:
3. Guarde el token
4. Vaya a la página de inicio y proporcione un mensaje de éxito
5. Fallo: proporcione un mensaje de error y deje que el usuario inicie sesión nuevamente.
Código específico:
Cree una nueva carpeta para encapsular axios
Solicitud de paquete
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;
Solicitar API de interfaz
import request from "./index";
export function login(data) {
// console.log('data::',data)
return request({
url: "login",
method: "POST",
data
});
}
Intercepción de ruta global en 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();
}
})
Código de la página de inicio de sesión
<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>
Resumen: Lo anterior es una idea de proceso para que un sistema de administración de back-end logre el inicio de sesión. Para obtener más detalles, impleméntelo junto con la API
Bienvenido a unirse al grupo para discusiones técnicas, número de grupo: 954314851
