长时间不对页面进行操作就 推出登录
作者:互联网
<template>
<div id="app" @mousemove="moveEvent" @click="moveEvent">
<router-view />
</div>
</template>
<script> export default { name: "App", data() { return { timmer: null, }; }, created() {
}, methods: { moveEvent: function () { let path = ["/login"]; if (!path.includes(this.$route.path)) { clearTimeout(this.timmer); this.init(); } }, init: function () { this.timmer = setTimeout(() => { sessionStorage.clear();
this.clearAllCookie(); // this.$router.go(0) // this.$router.push({ // path: '/login' // }) // 1000*60*30 }, 1000*60*10); }, clearAllCookie() { var keys = document.cookie.match(/[^ =;]+(?=\=)/g); if (keys) { this.logout(); } }, logout() { console.log("logout"); let that = this; //处理vueX
that.$store.state.isLogin = false; that.$store.state.cookie = ""; that.$store.state.userinfo = {}; that.$store.state.userName = ""; that.$store.state.cookie = ""; $.ajax({ //备用请求 和下面的vue-jsop实际效果是一样的 只不过这个是jq url: "https://sso.chci.cn/jsonLogout.do", type: "GET", dataType: "jsonp", jsonp: "mycallback", xhrFields: { withCredentials: true, //解决跨服务传递时不传递cookie的问题,允许携带证书 }, crossDomain: true, //允许跨域 timeout: 5000, success: function (data) { that.$cookies .keys() .forEach((cookie) => that.$cookies.remove(cookie)); that.$cookies.remove("SSOID", "/", ".chci.cn"); that.$cookies.remove("JSESSIONID", "/", ".chci.cn"); that.isLogin = false; //当前页登录状态改为 未登录 let returnUrl = encodeURIComponent(window.location.href); window.location.href = "https://sso.chci.cn/login.do?method=get&returnURL=" + returnUrl; }, }); }, }, }; </script>
<style> * { margin: 0; padding: 0; } html, body, #app { width: 100%; height: 100%; } a { text-decoration: none; } .block { margin-top: 10px; } .el-scrollbar__wrap { overflow-x: hidden; } .el-autocomplete-suggestion .el-scrollbar__wrap { overflow: scroll; } .el-menu-item-group__title { padding: 0 0 0 20px; } .el-icon-s-fold:before { font-size: 26px; font-weight: normal; } .el-icon-close { margin: -13px 20px 0 0; font-size: 20px; } .el-input__inner, .el-cascader { height: 35px; } /* 搜索通用样式 */ .toplist { margin: 0 0 10px; } .toplist h6 { float: left; margin-right: 10px; font-weight: normal; } .toplist h6 .el-button { line-height: 35px; padding-top: 0; padding-bottom: 0; margin-left: 0; vertical-align: top; } .toplist h6 .el-button .el-icon-search { margin-top: 13px; } .toplist h6 input, .toplist h6 button { height: 35px !important; } .toplist h6 input { padding-right: 0 !important; /* padding-left: 5px !important; */ } .toplist h6 .el-input-group__append { padding-left: 0; } .el-cascader { line-height: 35px; margin-top: -1px; width: 300px; } .clear { clear: both; } .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .el-form--label-top .el-form-item__label { padding: 0; } table td div button.el-button--small { padding: 0; } .toplist h6 input.el-range-input { background-color: transparent !important; } .el-select-dropdown__list { padding: 6px 0 18px 0; } .el-table--border::after, .el-table--group::after, .el-table::before { height: 0; } .el-icon-circle-close:before { color: #fff !important; }
/* 解决dialog与message同时使用 遮罩z-index问题 message会出现在灰色遮罩下面 this.$message 添加customClass:'mzindex'引入这个class就可解决*/ .mzindex { z-index: 3000 !important; } </style>
<script> export default { name: "App", data() { return { timmer: null, }; }, created() {
}, methods: { moveEvent: function () { let path = ["/login"]; if (!path.includes(this.$route.path)) { clearTimeout(this.timmer); this.init(); } }, init: function () { this.timmer = setTimeout(() => { sessionStorage.clear();
this.clearAllCookie(); // this.$router.go(0) // this.$router.push({ // path: '/login' // }) // 1000*60*30 }, 1000*60*10); }, clearAllCookie() { var keys = document.cookie.match(/[^ =;]+(?=\=)/g); if (keys) { this.logout(); } }, logout() { console.log("logout"); let that = this; //处理vueX
that.$store.state.isLogin = false; that.$store.state.cookie = ""; that.$store.state.userinfo = {}; that.$store.state.userName = ""; that.$store.state.cookie = ""; $.ajax({ //备用请求 和下面的vue-jsop实际效果是一样的 只不过这个是jq url: "https://sso.chci.cn/jsonLogout.do", type: "GET", dataType: "jsonp", jsonp: "mycallback", xhrFields: { withCredentials: true, //解决跨服务传递时不传递cookie的问题,允许携带证书 }, crossDomain: true, //允许跨域 timeout: 5000, success: function (data) { that.$cookies .keys() .forEach((cookie) => that.$cookies.remove(cookie)); that.$cookies.remove("SSOID", "/", ".chci.cn"); that.$cookies.remove("JSESSIONID", "/", ".chci.cn"); that.isLogin = false; //当前页登录状态改为 未登录 let returnUrl = encodeURIComponent(window.location.href); window.location.href = "https://sso.chci.cn/login.do?method=get&returnURL=" + returnUrl; }, }); }, }, }; </script>
<style> * { margin: 0; padding: 0; } html, body, #app { width: 100%; height: 100%; } a { text-decoration: none; } .block { margin-top: 10px; } .el-scrollbar__wrap { overflow-x: hidden; } .el-autocomplete-suggestion .el-scrollbar__wrap { overflow: scroll; } .el-menu-item-group__title { padding: 0 0 0 20px; } .el-icon-s-fold:before { font-size: 26px; font-weight: normal; } .el-icon-close { margin: -13px 20px 0 0; font-size: 20px; } .el-input__inner, .el-cascader { height: 35px; } /* 搜索通用样式 */ .toplist { margin: 0 0 10px; } .toplist h6 { float: left; margin-right: 10px; font-weight: normal; } .toplist h6 .el-button { line-height: 35px; padding-top: 0; padding-bottom: 0; margin-left: 0; vertical-align: top; } .toplist h6 .el-button .el-icon-search { margin-top: 13px; } .toplist h6 input, .toplist h6 button { height: 35px !important; } .toplist h6 input { padding-right: 0 !important; /* padding-left: 5px !important; */ } .toplist h6 .el-input-group__append { padding-left: 0; } .el-cascader { line-height: 35px; margin-top: -1px; width: 300px; } .clear { clear: both; } .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .el-form--label-top .el-form-item__label { padding: 0; } table td div button.el-button--small { padding: 0; } .toplist h6 input.el-range-input { background-color: transparent !important; } .el-select-dropdown__list { padding: 6px 0 18px 0; } .el-table--border::after, .el-table--group::after, .el-table::before { height: 0; } .el-icon-circle-close:before { color: #fff !important; }
/* 解决dialog与message同时使用 遮罩z-index问题 message会出现在灰色遮罩下面 this.$message 添加customClass:'mzindex'引入这个class就可解决*/ .mzindex { z-index: 3000 !important; } </style>
标签:__,el,长时间,登录,h6,padding,toplist,margin,页面 来源: https://www.cnblogs.com/2587jsq/p/14698939.html