body{ margin: 0 auto; padding: 0; width: 100%; color:#6a6f8c; background: url("./img/login_1.png"); background-size: cover; } body,html,.loginBody{ height: 100%; } input, button { outline: none; border: none; } .title{ text-align: center; color: #f3f3f3; font-size: 24px; margin-bottom: 40px; font-weight: bold; } .login-wrap{ width:100%; margin: auto; max-width:400px; min-height:500px; position:relative; background:url(./img/login_1.png); box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19); margin-top: 4%; } .login-html{ width:100%; height:100%; position:absolute; background:rgba(40,57,101,.9); padding: 50px 20px 30px 20px; } .ivu-form-item-content{ height: 50px; } .login-form .group1{ position: relative; } .icon-user{ position: absolute ; left: 10px; top: 12px; z-index: 5; color: #666; } .login-form .group2{ position: relative; padding-bottom: 10px; } .icon-pass{ position: absolute ; left: 10px; top: 13px; z-index: 5; color: #666; } #imgObj{ position: absolute ; width:40%; height: 30px; z-index: 5; left: 58%; top: 7px; border-radius:15px; opacity: 0.7; } .eyeDisabled{ position: absolute ; left: 91%; top: 10px; z-index: 5; color: #666; } .eyeDisabled:hover{ cursor: pointer; } .login-form .group .input{ width:100%; color:#fff; display:block; text-indent: 23px; font-size: 15px; border:none; padding:5px 10px; border-radius:25px; background:rgba(255,255,255,.1); } .login-form .group .button{ width:100%; color:#fff; display:block; border:none; padding:15px 20px; border-radius:25px; background:rgba(255,255,255,.1); margin-top: 20px; } .login-form .group input[data-type="password"]{ text-security:circle; -webkit-text-security:circle; } .login-form .group .button{ background:#1161ee; } .hr{ height:2px; margin:20px 0 30px 0; background:rgba(255,255,255,.2); } .foot-lnk{ text-align:center; } #imgObj:hover{ cursor: pointer; } .demo-spin-icon-load{ animation: ani-demo-spin 1s linear infinite; } @keyframes ani-demo-spin { from { transform: rotate(0deg);} 50% { transform: rotate(180deg);} to { transform: rotate(360deg);} }
loginJs.js
import {getMenuFuc} from '../../router/index' export default { data () { return { form: { account: 'admin', password: '123456', code: '' }, rules: { account: [ { required: true, message: '账号不能为空', trigger: 'blur' } ], password: [ { required: true, message: '密码不能为空', trigger: 'blur' } ], code: [ { required: true, message: '验证码不能为空', trigger: 'blur' } ] }, showPass: false, hidePass: true, error: false, errorMessage: '', token: '', imgUrl: '', validate: '', spinShow:false }; }, created (){ let _this = this _this.token = this.getCookie('token') _this.changeImg() $(".demo-spin-col").height($("body").height()) }, methods: { showPwd () { this.hidePass = false this.showPass = true }, hidePwd () { this.hidePass = true this.showPass = false }, handleSubmit () { let _this = this _this.$refs.loginForm.validate((valid) => { if (valid) { _this.spinShow = true _this.$ajax.post(_this.cfg.api.login, _this.form).then(function(res){ if(res.data.result){ _this.setCookie('token',res.data.token, 365) let role = res.data.data.role var roleString = '' for (var i=0; i<role.length; i++) { if (i == role.length-1) { roleString += role[i].roleName }else{ roleString += role[i].roleName + ',' } } sessionStorage.setItem("account",_this.form.account) sessionStorage.setItem("role",roleString) let menuTree = res.data.data.menuTree sessionStorage.setItem("menuTree",JSON.stringify(menuTree))//用于layout页面加载菜单 let buttonList = res.data.data.buttonList //存储按钮的权限控制 sessionStorage.setItem("buttonList",JSON.stringify(buttonList)) getMenuFuc(menuTree) _this.$router.push('home'); _this.error = false }else{ _this.error = true _this.errorMessage = res.data.message _this.form.code = '' _this.changeImg() } _this.spinShow = false }).catch((error)=>{ _this.spinShow = false}); } }); }, changeImg() { var imgSrc = $("#imgObj"); var src = imgSrc.attr("src"); imgSrc.attr("src", this.changeUrl(src)); }, changeUrl(url) { var timestamp = (new Date()).valueOf(); var index = url.indexOf("?",url); if (index > 0) { url = url.substring(0, index); } if ((url.indexOf("&") >= 0)) { url = url + "×tamp=" + timestamp; } else { url = url + "?timestamp=" + timestamp; } return url; } } };
以上这篇vue实现权限控制路由(vue-router 动态添加路由)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: