项目前景：后台管理系统是公司必备的，从前些年由于技术人员的稀有，导致后台系统非常昂贵，近些年IT行业的快速发展，使得一些中小型公司开始自己写后台，自己维护，从而获取利益的最大化。
今天是一个简单的后台登录操作
演示效果：
一、页面布局（Vue+Element Ui）
二、登录的流程
1、调用登录接口
2、登录成功：
3、保存token
4、跳转到首页，并给出成功的提示
5、失败：给出错误提示，让用户重新登录
具体代码：
新建文件夹对axios进行封装
封装请求
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;
请求接口api
import request from "./index";
export function login(data) {
// console.log('data::',data)
return request({
url: "login",
method: "POST",
data
});
}
在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();
}
})
登录页面代码
<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>
