1.el-dialog 组件
el-dialog 是element的弹出对话框组件，项目中用的element组件库，需要做一个当cookie超时的时候弹出登录的对话框，就用到了el-dialog.
先介绍一下el-dailog组件吧，官网介绍
<template>
<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input v-model="form.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="活动区域" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogFormVisible: false, // 通过改属性控制是否弹出对话框
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '120px'
};
}
};
</script>
2.axios
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中 。中文文档
axios支持的特性：
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http请求
- 支持 PromiseAPI
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
重点使用一下拦截请求和响应。
官方示例：
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
3.在根组件中添加拦截器，并引入弹框组件
<template>
<div id="app">
<router-view/>
<el-dialog
title="登陆提示"
:visible.sync="dialogVisible"
center
width="40%">
<LoginDialog @submitAfter="submitAfter"/> // 子组件给父组件传值，子组件使用$emit
</el-dialog>
</div>
</template>
<script>
// 引入弹框组件
import LoginDialog from "@/components/LoginDialog";
export default {
name: "App",
components: { LoginDialog },
data() {
return {
dialogVisible: false
};
},
methods: {
// 正常登录后关闭弹框
submitAfter() {
this.$data.dialogVisible = false;
},
// 路由组件name不是Login并且 cookie中的status状态过期，弹出登录弹框
checkSession() {
if (this.$route.name !== "Login" && !this.$cookies.get("status")) {
this.$data.dialogVisible = true;
return false;
}
return true;
}
},
mounted() {
// 根组件加载就创一个拦截器
this.$ajax.interceptors.request.use(
config => {
// 如果不是登录和退出的接口，就正常响应
if (config.url.indexOf("login.do") !== -1 || config.url.indexOf("logout.do") !== -1) {
return config;
// 如果 定义的路由组件name不是Login并且 cookie中的status状态过期，进行拦截提示
} else if (!this.checkSession()) {
return Promise.reject(new Error("会话过期，请重新登录"));
}
// 正常请求，不进行拦截
return config;
},
function(error) {
return Promise.reject(error);
}
);
// 10s 检查一次cookie中的status是否过期。过期就进行拦截，并进行弹框。
setInterval(() => {
this.checkSession();
}, 10000);
}
};
</script>
<style>
</style>
4.弹框组件
<template>
<el-form :model="ruleForm" status-icon :rules="rulesLogin" ref="ruleForm" label-width="100px" class="loginForm">
<el-form-item label="用户名" prop="username">
<el-input v-model="ruleForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" auto-complete="off" @keyup.enter.native="submitForm('ruleForm')"></el-input>
</el-form-item>
<el-form-item>
<span class="searchButton" @click="submitForm('ruleForm')">登 录</span>
<span class="searchButton1" @click="resetForm('ruleForm')">重 置</span>
</el-form-item>
</el-form>
</template>
<script>
import store from '../store'
import { mapActions } from "vuex";
import { systemUrl } from "./../urlCfg.js";
export default {
data() {
return {
// 表单数据
ruleForm: {
pass: "",
username: ""
},
// 表单验证规则
rulesLogin: {
pass: [
{
validator: validatePass,
trigger: "blur"
}
],
username: [
{
validator: checkUsername,
trigger: "blur"
}
]
}
};
},
store, // vuex状态
methods: {
...mapActions(["setUser"]),
// 提交表单
submitForm(formName) {
// 验证表单
this.$refs[formName].validate(valid => {
if (valid) {
// 发送请求
this.$ajax({
method: "post",
url: systemUrl.login,
data: {
userName: this.$data.ruleForm.username,
password: this.$data.ruleForm.pass
}
})
.then(({data}) => {
if (data.message === "success") {
this.$data.error = ""
// 将登录状态 写入cookkie 并设置保存周期
this.$cookies.set("status", "logined", 30 * 60)
// 将登录返回的数据保存到vuex中
this.setUser(data.data);
this.$message({
title: '提示',
type: 'success',
message: '登录成功！'
});
// 登录成功后将 通过子组件向父组件传值，关闭弹框
this.$emit("submitAfter");
this.$refs[formName].resetFields();
} else {
this.$message({
title: '提示',
type: 'info',
message: '用户名或密码错误！请重新登录！'
});
}
});
} else {
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
};
</script>
<style lang="scss" scoped>
</style>
上面主要是用了axios的请求拦截，响应拦截同理，官网有介绍。
