This commit is contained in:
BianLzhaoMin
parent
3475d484c0
commit
0e9b84f045
|
|
@ -9,21 +9,24 @@
|
|||
class="drawer-bg"
|
||||
@click="handleClickOutside"
|
||||
/>
|
||||
<sidebar v-if="!sidebar.hide && !isEmbedded" class="sidebar-container" />
|
||||
<sidebar
|
||||
v-if="!sidebar.hide && !sidebar.isEmbedded"
|
||||
class="sidebar-container"
|
||||
/>
|
||||
<div
|
||||
:class="{
|
||||
hasTagsView: needTagsView,
|
||||
sidebarHide: sidebar.hide || isEmbedded,
|
||||
embedded: isEmbedded,
|
||||
sidebarHide: sidebar.hide || sidebar.isEmbedded,
|
||||
embedded: sidebar.isEmbedded,
|
||||
}"
|
||||
class="main-container"
|
||||
>
|
||||
<div v-if="!isEmbedded" :class="{ 'fixed-header': fixedHeader }">
|
||||
<div v-if="!sidebar.isEmbedded" :class="{ 'fixed-header': fixedHeader }">
|
||||
<navbar />
|
||||
<tags-view v-if="needTagsView" />
|
||||
</div>
|
||||
<app-main />
|
||||
<right-panel v-if="!isEmbedded">
|
||||
<right-panel v-if="!sidebar.isEmbedded">
|
||||
<settings />
|
||||
</right-panel>
|
||||
</div>
|
||||
|
|
@ -57,13 +60,13 @@ export default {
|
|||
needTagsView: (state) => state.settings.tagsView,
|
||||
fixedHeader: (state) => state.settings.fixedHeader,
|
||||
}),
|
||||
isEmbedded() {
|
||||
// 检查 URL 参数中是否有 embedded=true 或者当前处于 iframe 中
|
||||
return (
|
||||
// this.$route.query.embedded === "true" || window.self !== window.top
|
||||
false
|
||||
);
|
||||
},
|
||||
// isEmbedded() {
|
||||
// // 检查 URL 参数中是否有 embedded=true 或者当前处于 iframe 中
|
||||
// return (
|
||||
// // this.$route.query.embedded === "true" || window.self !== window.top
|
||||
// false
|
||||
// );
|
||||
// },
|
||||
classObj() {
|
||||
return {
|
||||
hideSidebar: !this.sidebar.opened,
|
||||
|
|
|
|||
|
|
@ -12,26 +12,29 @@ const whiteList = ["/login", "/register", "/ywgllogin"];
|
|||
router.beforeEach((to, from, next) => {
|
||||
NProgress.start();
|
||||
|
||||
// 如果是嵌入模式，尝试从父窗口获取 token
|
||||
// 如果是嵌入模式，设置嵌入状态并尝试从父窗口获取 token
|
||||
if (window.self !== window.top) {
|
||||
// 设置嵌入模式状态
|
||||
store.commit("app/SET_SIDEBAR_EMBEDDED", true);
|
||||
try {
|
||||
// 只有同源才能访问 window.parent.sessionStorage
|
||||
const parentToken = window.parent.sessionStorage.getItem("Admin-Token");
|
||||
if (parentToken && !getToken()) {
|
||||
store.commit("SET_TOKEN", parentToken);
|
||||
store.commit("user/SET_TOKEN", parentToken);
|
||||
setToken(parentToken);
|
||||
}
|
||||
} catch (e) {
|
||||
const parentToken = localStorage.getItem("Admin-Token");
|
||||
if (parentToken && !getToken()) {
|
||||
store.commit("SET_TOKEN", parentToken);
|
||||
store.commit("user/SET_TOKEN", parentToken);
|
||||
setToken(parentToken);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 非嵌入模式，确保状态为 false
|
||||
const parentToken = localStorage.getItem("Admin-Token");
|
||||
if (parentToken && !getToken()) {
|
||||
store.commit("SET_TOKEN", parentToken);
|
||||
store.commit("user/SET_TOKEN", parentToken);
|
||||
setToken(parentToken);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,66 +1,73 @@
|
|||
import Cookies from 'js-cookie'
|
||||
import Cookies from "js-cookie";
|
||||
|
||||
const state = {
|
||||
sidebar: {
|
||||
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
|
||||
opened: Cookies.get("sidebarStatus")
|
||||
? !!+Cookies.get("sidebarStatus")
|
||||
: true,
|
||||
withoutAnimation: false,
|
||||
hide: false
|
||||
hide: false,
|
||||
isEmbedded: false, // 是否隐藏侧边栏和头部导航栏
|
||||
},
|
||||
device: 'desktop',
|
||||
size: Cookies.get('size') || 'medium'
|
||||
}
|
||||
device: "desktop",
|
||||
size: Cookies.get("size") || "medium",
|
||||
};
|
||||
|
||||
const mutations = {
|
||||
TOGGLE_SIDEBAR: state => {
|
||||
TOGGLE_SIDEBAR: (state) => {
|
||||
if (state.sidebar.hide) {
|
||||
return false;
|
||||
}
|
||||
state.sidebar.opened = !state.sidebar.opened
|
||||
state.sidebar.withoutAnimation = false
|
||||
state.sidebar.opened = !state.sidebar.opened;
|
||||
state.sidebar.withoutAnimation = false;
|
||||
if (state.sidebar.opened) {
|
||||
Cookies.set('sidebarStatus', 1)
|
||||
Cookies.set("sidebarStatus", 1);
|
||||
} else {
|
||||
Cookies.set('sidebarStatus', 0)
|
||||
Cookies.set("sidebarStatus", 0);
|
||||
}
|
||||
},
|
||||
CLOSE_SIDEBAR: (state, withoutAnimation) => {
|
||||
Cookies.set('sidebarStatus', 0)
|
||||
state.sidebar.opened = false
|
||||
state.sidebar.withoutAnimation = withoutAnimation
|
||||
Cookies.set("sidebarStatus", 0);
|
||||
state.sidebar.opened = false;
|
||||
state.sidebar.withoutAnimation = withoutAnimation;
|
||||
},
|
||||
TOGGLE_DEVICE: (state, device) => {
|
||||
state.device = device
|
||||
state.device = device;
|
||||
},
|
||||
SET_SIZE: (state, size) => {
|
||||
state.size = size
|
||||
Cookies.set('size', size)
|
||||
state.size = size;
|
||||
Cookies.set("size", size);
|
||||
},
|
||||
SET_SIDEBAR_HIDE: (state, status) => {
|
||||
state.sidebar.hide = status
|
||||
}
|
||||
}
|
||||
state.sidebar.hide = status;
|
||||
},
|
||||
SET_SIDEBAR_EMBEDDED: (state, status) => {
|
||||
console.log("status侧边栏隐藏状态", status);
|
||||
state.sidebar.isEmbedded = status;
|
||||
},
|
||||
};
|
||||
|
||||
const actions = {
|
||||
toggleSideBar({ commit }) {
|
||||
commit('TOGGLE_SIDEBAR')
|
||||
commit("TOGGLE_SIDEBAR");
|
||||
},
|
||||
closeSideBar({ commit }, { withoutAnimation }) {
|
||||
commit('CLOSE_SIDEBAR', withoutAnimation)
|
||||
commit("CLOSE_SIDEBAR", withoutAnimation);
|
||||
},
|
||||
toggleDevice({ commit }, device) {
|
||||
commit('TOGGLE_DEVICE', device)
|
||||
commit("TOGGLE_DEVICE", device);
|
||||
},
|
||||
setSize({ commit }, size) {
|
||||
commit('SET_SIZE', size)
|
||||
commit("SET_SIZE", size);
|
||||
},
|
||||
toggleSideBarHide({ commit }, status) {
|
||||
commit('SET_SIDEBAR_HIDE', status)
|
||||
}
|
||||
}
|
||||
commit("SET_SIDEBAR_HIDE", status);
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state,
|
||||
mutations,
|
||||
actions
|
||||
}
|
||||
actions,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,114 +1,125 @@
|
|||
import { login, logout, getInfo,defaultLogin } from '@/api/login'
|
||||
import { getToken, setToken, removeToken } from '@/utils/auth'
|
||||
import { login, logout, getInfo, defaultLogin } from "@/api/login";
|
||||
import { getToken, setToken, removeToken } from "@/utils/auth";
|
||||
|
||||
const user = {
|
||||
state: {
|
||||
token: getToken(),
|
||||
id: '',
|
||||
name: '',
|
||||
avatar: '',
|
||||
id: "",
|
||||
name: "",
|
||||
avatar: "",
|
||||
roles: [],
|
||||
permissions: []
|
||||
permissions: [],
|
||||
},
|
||||
|
||||
mutations: {
|
||||
SET_TOKEN: (state, token) => {
|
||||
state.token = token
|
||||
state.token = token;
|
||||
},
|
||||
SET_ID: (state, id) => {
|
||||
state.id = id
|
||||
state.id = id;
|
||||
},
|
||||
SET_NAME: (state, name) => {
|
||||
state.name = name
|
||||
state.name = name;
|
||||
},
|
||||
SET_AVATAR: (state, avatar) => {
|
||||
state.avatar = avatar
|
||||
state.avatar = avatar;
|
||||
},
|
||||
SET_ROLES: (state, roles) => {
|
||||
state.roles = roles
|
||||
state.roles = roles;
|
||||
},
|
||||
SET_PERMISSIONS: (state, permissions) => {
|
||||
state.permissions = permissions
|
||||
}
|
||||
state.permissions = permissions;
|
||||
},
|
||||
},
|
||||
|
||||
actions: {
|
||||
// 登录
|
||||
Login({ commit }, userInfo) {
|
||||
const username = userInfo.username.trim()
|
||||
const password = userInfo.password
|
||||
const code = userInfo.code
|
||||
const uuid = userInfo.uuid
|
||||
const username = userInfo.username.trim();
|
||||
const password = userInfo.password;
|
||||
const code = userInfo.code;
|
||||
const uuid = userInfo.uuid;
|
||||
return new Promise((resolve, reject) => {
|
||||
login(username, password, code, uuid).then(res => {
|
||||
setToken(res.token)
|
||||
commit('SET_TOKEN', res.token)
|
||||
resolve()
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
login(username, password, code, uuid)
|
||||
.then((res) => {
|
||||
setToken(res.token);
|
||||
commit("SET_TOKEN", res.token);
|
||||
resolve();
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
},
|
||||
//默认跳转
|
||||
DefaultLogin({ commit }, userInfo) {
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
defaultLogin(userInfo.username,userInfo.token).then(res => {
|
||||
setToken(res.token)
|
||||
commit('SET_TOKEN', res.token)
|
||||
resolve()
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
defaultLogin(userInfo.username, userInfo.token)
|
||||
.then((res) => {
|
||||
setToken(res.token);
|
||||
commit("SET_TOKEN", res.token);
|
||||
resolve();
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 获取用户信息
|
||||
GetInfo({ commit, state }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
getInfo().then(res => {
|
||||
const user = res.user
|
||||
const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : process.env.VUE_APP_BASE_API + user.avatar;
|
||||
if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
|
||||
commit('SET_ROLES', res.roles)
|
||||
commit('SET_PERMISSIONS', res.permissions)
|
||||
} else {
|
||||
commit('SET_ROLES', ['ROLE_DEFAULT'])
|
||||
}
|
||||
commit('SET_ID', user.userId)
|
||||
commit('SET_NAME', user.userName)
|
||||
commit('SET_AVATAR', avatar)
|
||||
resolve(res)
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
getInfo()
|
||||
.then((res) => {
|
||||
const user = res.user;
|
||||
const avatar =
|
||||
user.avatar == "" || user.avatar == null
|
||||
? require("@/assets/images/profile.jpg")
|
||||
: process.env.VUE_APP_BASE_API + user.avatar;
|
||||
if (res.roles && res.roles.length > 0) {
|
||||
// 验证返回的roles是否是一个非空数组
|
||||
commit("SET_ROLES", res.roles);
|
||||
commit("SET_PERMISSIONS", res.permissions);
|
||||
} else {
|
||||
commit("SET_ROLES", ["ROLE_DEFAULT"]);
|
||||
}
|
||||
commit("SET_ID", user.userId);
|
||||
commit("SET_NAME", user.userName);
|
||||
commit("SET_AVATAR", avatar);
|
||||
resolve(res);
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 退出系统
|
||||
LogOut({ commit, state }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
logout(state.token).then(() => {
|
||||
commit('SET_TOKEN', '')
|
||||
commit('SET_ROLES', [])
|
||||
commit('SET_PERMISSIONS', [])
|
||||
removeToken()
|
||||
resolve()
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
logout(state.token)
|
||||
.then(() => {
|
||||
commit("SET_TOKEN", "");
|
||||
commit("SET_ROLES", []);
|
||||
commit("SET_PERMISSIONS", []);
|
||||
removeToken();
|
||||
resolve();
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 前端 登出
|
||||
FedLogOut({ commit }) {
|
||||
return new Promise(resolve => {
|
||||
commit('SET_TOKEN', '')
|
||||
removeToken()
|
||||
resolve()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
return new Promise((resolve) => {
|
||||
commit("SET_TOKEN", "");
|
||||
removeToken();
|
||||
resolve();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default user
|
||||
export default user;
|
||||
|
|
|
|||
|
|
@ -1,50 +1,93 @@
|
|||
<template>
|
||||
<div class="login">
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
||||
<el-form
|
||||
ref="loginForm"
|
||||
:model="loginForm"
|
||||
:rules="loginRules"
|
||||
class="login-form"
|
||||
>
|
||||
<h3 class="title">领导履职管理系统</h3>
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
|
||||
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
|
||||
<el-input
|
||||
v-model="loginForm.username"
|
||||
type="text"
|
||||
auto-complete="off"
|
||||
placeholder="账号"
|
||||
>
|
||||
<svg-icon
|
||||
slot="prefix"
|
||||
icon-class="user"
|
||||
class="el-input__icon input-icon"
|
||||
/>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
|
||||
@keyup.enter.native="handleLogin">
|
||||
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
type="password"
|
||||
auto-complete="off"
|
||||
placeholder="密码"
|
||||
@keyup.enter.native="handleLogin"
|
||||
>
|
||||
<svg-icon
|
||||
slot="prefix"
|
||||
icon-class="password"
|
||||
class="el-input__icon input-icon"
|
||||
/>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" v-if="captchaEnabled">
|
||||
<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
|
||||
@keyup.enter.native="handleLogin">
|
||||
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
|
||||
<el-input
|
||||
v-model="loginForm.code"
|
||||
auto-complete="off"
|
||||
placeholder="验证码"
|
||||
style="width: 63%"
|
||||
@keyup.enter.native="handleLogin"
|
||||
>
|
||||
<svg-icon
|
||||
slot="prefix"
|
||||
icon-class="validCode"
|
||||
class="el-input__icon input-icon"
|
||||
/>
|
||||
</el-input>
|
||||
<div class="login-code">
|
||||
<img :src="codeUrl" @click="getCode" class="login-code-img" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
|
||||
<el-form-item style="width:100%;">
|
||||
<el-button :loading="loading" size="medium" type="primary" style="width:100%;"
|
||||
@click.native.prevent="handleLogin">
|
||||
<el-checkbox
|
||||
v-model="loginForm.rememberMe"
|
||||
style="margin: 0px 0px 25px 0px"
|
||||
>记住密码</el-checkbox
|
||||
>
|
||||
<el-form-item style="width: 100%">
|
||||
<el-button
|
||||
:loading="loading"
|
||||
size="medium"
|
||||
type="primary"
|
||||
style="width: 100%"
|
||||
@click.native.prevent="handleLogin"
|
||||
>
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
</el-button>
|
||||
<div style="float: right;" v-if="register">
|
||||
<router-link class="link-type" :to="'/register'">立即注册</router-link>
|
||||
<div style="float: right" v-if="register">
|
||||
<router-link class="link-type" :to="'/register'"
|
||||
>立即注册</router-link
|
||||
>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 底部 -->
|
||||
<!-- <div class="el-login-footer">-->
|
||||
<!-- <span>Copyright © 2018-2023 ldlz.vip All Rights Reserved.</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="el-login-footer">-->
|
||||
<!-- <span>Copyright © 2018-2023 ldlz.vip All Rights Reserved.</span>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCodeImg } from "@/api/login";
|
||||
import Cookies from "js-cookie";
|
||||
import { encrypt, decrypt } from '@/utils/jsencrypt'
|
||||
import { encrypt, decrypt } from "@/utils/jsencrypt";
|
||||
|
||||
export default {
|
||||
name: "Login",
|
||||
|
|
@ -56,23 +99,23 @@ export default {
|
|||
password: "",
|
||||
rememberMe: false,
|
||||
code: "",
|
||||
uuid: ""
|
||||
uuid: "",
|
||||
},
|
||||
loginRules: {
|
||||
username: [
|
||||
{ required: true, trigger: "blur", message: "请输入您的账号" }
|
||||
{ required: true, trigger: "blur", message: "请输入您的账号" },
|
||||
],
|
||||
password: [
|
||||
{ required: true, trigger: "blur", message: "请输入您的密码" }
|
||||
{ required: true, trigger: "blur", message: "请输入您的密码" },
|
||||
],
|
||||
code: [{ required: true, trigger: "change", message: "请输入验证码" }]
|
||||
code: [{ required: true, trigger: "change", message: "请输入验证码" }],
|
||||
},
|
||||
loading: false,
|
||||
// 验证码开关
|
||||
captchaEnabled: true,
|
||||
// 注册开关
|
||||
register: false,
|
||||
redirect: undefined
|
||||
redirect: undefined,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -80,8 +123,8 @@ export default {
|
|||
handler: function (route) {
|
||||
this.redirect = route.query && route.query.redirect;
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getCode();
|
||||
|
|
@ -89,8 +132,9 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
getCode() {
|
||||
getCodeImg().then(res => {
|
||||
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
|
||||
getCodeImg().then((res) => {
|
||||
this.captchaEnabled =
|
||||
res.captchaEnabled === undefined ? true : res.captchaEnabled;
|
||||
if (this.captchaEnabled) {
|
||||
this.codeUrl = "data:image/gif;base64," + res.img;
|
||||
this.loginForm.uuid = res.uuid;
|
||||
|
|
@ -100,38 +144,48 @@ export default {
|
|||
getCookie() {
|
||||
const username = Cookies.get("username");
|
||||
const password = Cookies.get("password");
|
||||
const rememberMe = Cookies.get('rememberMe')
|
||||
const rememberMe = Cookies.get("rememberMe");
|
||||
this.loginForm = {
|
||||
username: username === undefined ? this.loginForm.username : username,
|
||||
password: password === undefined ? this.loginForm.password : decrypt(password),
|
||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
|
||||
password:
|
||||
password === undefined ? this.loginForm.password : decrypt(password),
|
||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
|
||||
};
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
this.$refs.loginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
if (this.loginForm.rememberMe) {
|
||||
Cookies.set("username", this.loginForm.username, { expires: 30 });
|
||||
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
|
||||
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
|
||||
Cookies.set("password", encrypt(this.loginForm.password), {
|
||||
expires: 30,
|
||||
});
|
||||
Cookies.set("rememberMe", this.loginForm.rememberMe, {
|
||||
expires: 30,
|
||||
});
|
||||
} else {
|
||||
Cookies.remove("username");
|
||||
Cookies.remove("password");
|
||||
Cookies.remove('rememberMe');
|
||||
Cookies.remove("rememberMe");
|
||||
}
|
||||
this.$store.dispatch("Login", this.loginForm).then(() => {
|
||||
this.$router.push({ path: this.redirect || "/" }).catch(() => { });
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
if (this.captchaEnabled) {
|
||||
this.getCode();
|
||||
}
|
||||
});
|
||||
this.$store
|
||||
.dispatch("Login", this.loginForm)
|
||||
.then(() => {
|
||||
// 如果从登录页面进入，则不隐藏侧边栏以及头部导航栏
|
||||
this.$store.commit("app/SET_SIDEBAR_EMBEDDED", false);
|
||||
this.$router.push({ path: this.redirect || "/" }).catch(() => {});
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
if (this.captchaEnabled) {
|
||||
this.getCode();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -144,7 +198,7 @@ export default {
|
|||
background-image: url("../assets/images/login-background.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom;
|
||||
background-color: #F2F2F2;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -1,199 +1,196 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<div id="loader-wrapper">
|
||||
<div id="loader"></div>
|
||||
<div class="loader-section section-left"></div>
|
||||
<div class="loader-section section-right"></div>
|
||||
<div class="load_title">正在加载系统资源，请耐心等待</div>
|
||||
</div>
|
||||
<div id="loader-wrapper">
|
||||
<div id="loader"></div>
|
||||
<div class="loader-section section-left"></div>
|
||||
<div class="loader-section section-right"></div>
|
||||
<div class="load_title">正在加载系统资源，请耐心等待</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
.chromeframe {
|
||||
margin: 0.2em 0;
|
||||
background: #ccc;
|
||||
color: #000;
|
||||
padding: 0.2em 0;
|
||||
}
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
.chromeframe {
|
||||
margin: 0.2em 0;
|
||||
background: #ccc;
|
||||
color: #000;
|
||||
padding: 0.2em 0;
|
||||
}
|
||||
|
||||
#loader-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999999;
|
||||
}
|
||||
#loader-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999999;
|
||||
}
|
||||
|
||||
#loader {
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: -75px 0 0 -75px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #FFF;
|
||||
-webkit-animation: spin 2s linear infinite;
|
||||
-ms-animation: spin 2s linear infinite;
|
||||
-moz-animation: spin 2s linear infinite;
|
||||
-o-animation: spin 2s linear infinite;
|
||||
animation: spin 2s linear infinite;
|
||||
z-index: 1001;
|
||||
}
|
||||
#loader {
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: -75px 0 0 -75px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #fff;
|
||||
-webkit-animation: spin 2s linear infinite;
|
||||
-ms-animation: spin 2s linear infinite;
|
||||
-moz-animation: spin 2s linear infinite;
|
||||
-o-animation: spin 2s linear infinite;
|
||||
animation: spin 2s linear infinite;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
#loader:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #FFF;
|
||||
-webkit-animation: spin 3s linear infinite;
|
||||
-moz-animation: spin 3s linear infinite;
|
||||
-o-animation: spin 3s linear infinite;
|
||||
-ms-animation: spin 3s linear infinite;
|
||||
animation: spin 3s linear infinite;
|
||||
}
|
||||
#loader:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #fff;
|
||||
-webkit-animation: spin 3s linear infinite;
|
||||
-moz-animation: spin 3s linear infinite;
|
||||
-o-animation: spin 3s linear infinite;
|
||||
-ms-animation: spin 3s linear infinite;
|
||||
animation: spin 3s linear infinite;
|
||||
}
|
||||
|
||||
#loader:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #FFF;
|
||||
-moz-animation: spin 1.5s linear infinite;
|
||||
-o-animation: spin 1.5s linear infinite;
|
||||
-ms-animation: spin 1.5s linear infinite;
|
||||
-webkit-animation: spin 1.5s linear infinite;
|
||||
animation: spin 1.5s linear infinite;
|
||||
}
|
||||
#loader:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #fff;
|
||||
-moz-animation: spin 1.5s linear infinite;
|
||||
-o-animation: spin 1.5s linear infinite;
|
||||
-ms-animation: spin 1.5s linear infinite;
|
||||
-webkit-animation: spin 1.5s linear infinite;
|
||||
animation: spin 1.5s linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
#loader-wrapper .loader-section {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 51%;
|
||||
height: 100%;
|
||||
background: #009688;
|
||||
z-index: 1000;
|
||||
-webkit-transform: translateX(0);
|
||||
-ms-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
#loader-wrapper .loader-section.section-left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#loader-wrapper .loader-section {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 51%;
|
||||
height: 100%;
|
||||
background: #009688;
|
||||
z-index: 1000;
|
||||
-webkit-transform: translateX(0);
|
||||
-ms-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
#loader-wrapper .loader-section.section-right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#loader-wrapper .loader-section.section-left {
|
||||
left: 0;
|
||||
}
|
||||
.loaded #loader-wrapper .loader-section.section-left {
|
||||
-webkit-transform: translateX(-100%);
|
||||
-ms-transform: translateX(-100%);
|
||||
transform: translateX(-100%);
|
||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
#loader-wrapper .loader-section.section-right {
|
||||
right: 0;
|
||||
}
|
||||
.loaded #loader-wrapper .loader-section.section-right {
|
||||
-webkit-transform: translateX(100%);
|
||||
-ms-transform: translateX(100%);
|
||||
transform: translateX(100%);
|
||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
.loaded #loader {
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.loaded #loader-wrapper .loader-section.section-left {
|
||||
-webkit-transform: translateX(-100%);
|
||||
-ms-transform: translateX(-100%);
|
||||
transform: translateX(-100%);
|
||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
}
|
||||
.loaded #loader-wrapper {
|
||||
visibility: hidden;
|
||||
-webkit-transform: translateY(-100%);
|
||||
-ms-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
-webkit-transition: all 0.3s 1s ease-out;
|
||||
transition: all 0.3s 1s ease-out;
|
||||
}
|
||||
|
||||
.loaded #loader-wrapper .loader-section.section-right {
|
||||
-webkit-transform: translateX(100%);
|
||||
-ms-transform: translateX(100%);
|
||||
transform: translateX(100%);
|
||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
}
|
||||
.no-js #loader-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loaded #loader {
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
.no-js h1 {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.loaded #loader-wrapper {
|
||||
visibility: hidden;
|
||||
-webkit-transform: translateY(-100%);
|
||||
-ms-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
-webkit-transition: all 0.3s 1s ease-out;
|
||||
transition: all 0.3s 1s ease-out;
|
||||
}
|
||||
#loader-wrapper .load_title {
|
||||
font-family: "Open Sans";
|
||||
color: #fff;
|
||||
font-size: 19px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
z-index: 9999999999999;
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
opacity: 1;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.no-js #loader-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.no-js h1 {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
#loader-wrapper .load_title {
|
||||
font-family: 'Open Sans';
|
||||
color: #FFF;
|
||||
font-size: 19px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
z-index: 9999999999999;
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
opacity: 1;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
#loader-wrapper .load_title span {
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-size: 13px;
|
||||
color: #FFF;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
#loader-wrapper .load_title span {
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Cookies from "js-cookie";
|
||||
export default {
|
||||
|
|
@ -209,7 +206,6 @@ export default {
|
|||
uuid: "",
|
||||
},
|
||||
loading: false,
|
||||
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -219,13 +215,16 @@ export default {
|
|||
},
|
||||
immediate: true,
|
||||
},
|
||||
},beforeRouteEnter (to, from, next) {
|
||||
console.log('从 ' + from.path + ' 进入ywgllogin');
|
||||
},
|
||||
beforeRouteEnter(to, from, next) {
|
||||
console.log("从 " + from.path + " 进入ywgllogin");
|
||||
next(); // 必须调用next()来解决路由守卫的promise
|
||||
},
|
||||
created() {
|
||||
//平台单独的登录 2024年4月16日11:23:58
|
||||
this.getLoginByNameAndTokenJ();
|
||||
// 如果从该页面进入，则不隐藏侧边栏以及头部导航栏
|
||||
this.$store.commit("SET_SIDEBAR_EMBEDDED", false);
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
|
|
@ -233,54 +232,56 @@ export default {
|
|||
*/
|
||||
getLoginByNameAndTokenJ() {
|
||||
console.log(window.location.href);
|
||||
let url=window.location.href.split("?");
|
||||
let tokens='';
|
||||
let username='';
|
||||
if(url.length>1){
|
||||
let params=url[1].split("#");
|
||||
if(params.length>0){
|
||||
params=params[0].split("&");
|
||||
if(params.length>1){
|
||||
tokens=params[1]
|
||||
let url = window.location.href.split("?");
|
||||
let tokens = "";
|
||||
let username = "";
|
||||
if (url.length > 1) {
|
||||
let params = url[1].split("#");
|
||||
if (params.length > 0) {
|
||||
params = params[0].split("&");
|
||||
if (params.length > 1) {
|
||||
tokens = params[1];
|
||||
}
|
||||
}
|
||||
}
|
||||
// if(!tokens){
|
||||
// tokens = this.$route.query.token;
|
||||
// username=this.$route.query.username;
|
||||
// }
|
||||
tokens = this.$route.query.token;
|
||||
username=this.$route.query.username;
|
||||
// if(!tokens){
|
||||
// tokens = this.$route.query.token;
|
||||
// username=this.$route.query.username;
|
||||
// }
|
||||
tokens = this.$route.query.token;
|
||||
username = this.$route.query.username;
|
||||
console.log(tokens);
|
||||
console.log(username)
|
||||
username='bnsAdmin'
|
||||
console.log(username);
|
||||
username = "bnsAdmin";
|
||||
//调用登录的接口
|
||||
if (username) {
|
||||
debugger
|
||||
debugger;
|
||||
//转圈圈，不要看到登陆页面，无感体验
|
||||
this.loading = true;
|
||||
let loginForm = {
|
||||
token:tokens,
|
||||
username:username
|
||||
token: tokens,
|
||||
username: username,
|
||||
};
|
||||
console.log(loginForm);
|
||||
console.log("开始登录..")
|
||||
console.log("开始登录..");
|
||||
//执行另一套登录操作
|
||||
this.$store.dispatch("DefaultLogin", loginForm).then(() => {
|
||||
this.$router.push({ path: this.redirect || "/" }).catch(() => { });
|
||||
}).catch(() => {
|
||||
window.location.href = 'http://20.56.230.91:10080/bonus_cloud_web/login.html';
|
||||
});
|
||||
// this.$message.error("用户token为空");
|
||||
this.$store
|
||||
.dispatch("DefaultLogin", loginForm)
|
||||
.then(() => {
|
||||
this.$router.push({ path: this.redirect || "/" }).catch(() => {});
|
||||
})
|
||||
.catch(() => {
|
||||
window.location.href =
|
||||
"http://20.56.230.91:10080/bonus_cloud_web/login.html";
|
||||
});
|
||||
// this.$message.error("用户token为空");
|
||||
} else {
|
||||
//本地环境
|
||||
window.location.href = 'http://20.56.230.91:10080/bonus_cloud_web/login.html';
|
||||
// console.log("tick为空..")
|
||||
window.location.href =
|
||||
"http://20.56.230.91:10080/bonus_cloud_web/login.html";
|
||||
// console.log("tick为空..")
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue