Perspectivas do projeto : o sistema de gerenciamento de back-end é essencial para a empresa. Nos últimos anos, a escassez de pessoal técnico tornou o sistema de back-end muito caro. O rápido desenvolvimento da indústria de TI nos últimos anos fez com que algumas pequenas e médias empresas escrevessem seus próprios back-ends e os mantivessem. Maximize os benefícios.
Hoje é uma operação simples de login em segundo plano
Efeito de demonstração:
1
1. Layout da página (Vue + Elemento Ui)
Em segundo lugar, o processo de login
1. Chame a interface de login
2. Faça login com sucesso:
3. Salve o token
4. Vá para a página inicial e forneça um prompt de sucesso
5. Fail: forneça um prompt de erro e deixe o usuário fazer login novamente.
Código específico:
Crie uma nova pasta para encapsular os axios
Pedido de pacote
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 interface API
import request from "./index";
export function login(data) {
// console.log('data::',data)
return request({
url: "login",
method: "POST",
data
});
}
Interceptação de rota global em 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 da página de login
<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>
Resumo: O acima é uma ideia de processo para um sistema de gerenciamento de back-end para conseguir o login. Para obter detalhes, implemente-o em conjunto com a API
Bem-vindo ao se juntar ao grupo para discussões técnicas, número do grupo: 954314851
