今天主要写了后台的用户登录,下面就说说怎么实现用户的登录。
效果:
代码实现:
1、首先就是页面的布局(主要是用element-ui来实现的)
<template>
<div class="login_box">
<div class="login_content">
<h1>用户登录</h1>
<el-form
:model="ruleForm"
status-icon
:rules="rules"
ref="ruleForm"
label-width="65px"
class="demo-ruleForm"
>
<el-form-item label="用户名" prop="username">
<el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">登录</el-button>
<el-button @click="resetForm" class="test">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
// 引入接口
import { login } from "../../http/api";
export default {
data() {
return {
ruleForm: {
username: "",
password: ""
},
rules: {
username: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 5, max: 20, message: "长度在 5 到 20 个字符", trigger: "blur" }
],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
]
}
};
},
methods: {
async submitForm() {
/**
* 调用登录接口
* 成功:
* 保存token
* 跳转到首页,并给出成功的提示
* 失败:给出错误提示,让用户重新登录
*/
const res = await login(this.ruleForm);
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"
});
}
console.log(res);
},
resetForm() {
console.log("重置");
this.ruleForm.username = "";
this.ruleForm.password = "";
}
}
};
</script>
<style lang="scss" scoped>
.login_box {
width: 100%;
height: 100%;
background-color: #324057;
position: relative;
.login_content {
width: 35%;
height: 350px;
background-color: white;
border-radius: 10px;
overflow: hidden;
position: absolute;
top: 25%;
left: 30%;
h1 {
text-align: center;
width: 100%;
height: 40px;
line-height: 40px;
}
.demo-ruleForm {
padding: 30px;
.test {
background-color: #999;
color: white;
}
}
}
}
</style>
2、接着就是网络层的一个封装
在src的目录下,建一个文件夹(http)
a、在http下建一个request.js文件,主要就是引入axios,创建axios实例,设置拦截请求和响应请求
import axios from "axios";
const service = axios.create({
baseURL: "https://www.liulongbin.top:8888/api/private/v1",
timeout: 30000
});
// 请求拦截器
axios.interceptors.request.use(
function(config) {
return config;
},
function(error) {
return Promise.reject(error);
}
);
// 响应拦截器
axios.interceptors.response.use(
function(config) {
return config;
},
function(error) {
return Promise.reject(error);
}
);
export default service;
b、接着就是对api的一个封装
import request from "./requset";
/**
* 登录接口
*/
export function login(data) {
console.log("接口", data);
return request({
url: "login",
method: "POST",
data
});
}
3、给登录一个点击事件,之后就是调用接口,实现功能。
async submitForm() {
/**
* 调用登录接口
* 成功:
* 保存token
* 跳转到首页,并给出成功的提示
* 失败:给出错误提示,让用户重新登录
*/
const res = await login(this.ruleForm);
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"
});
}
console.log(res);
},
上面的就可以实现登录了
4、接着就说说路由拦截这一块(在main.js里面写)
// 全局路由l拦截
router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title;
}
next();
// 路由拦截
if (to.meta.auth) {
const token = localStorage.getItem("token");
if (!token) {
next({
name: "login",
query: {
redirect: to.fullPath
}
});
} else {
next();
}
} else {
next();
}
});
这个auth就是在路由的js文件里面设置的一个属性,为true。