<template>
<div class="center">
<div class="login-col">
<!-- Login -->
<div>
<!-- Logo-->
<el-row style="text-align: center">
<el-col :span="24">
<el-icon class="login-logo"><MostlyCloudy /></el-icon>
</el-col>
<el-col :span="24">
<span
style="
display: block;
font-size: 24px;
font-weight: 700;
padding: 5px 0;
margin-bottom: 20px;
text-align: center;
"
class="heading text-primary"
>{{ displayName }}</span
>
</el-col>
</el-row>
<template v-if="loginConfig.allowLogin">
<el-form :model="loginForm" size="default" class="cube-login">
<!-- 登录-->
<!-- <span class="heading text-primary"> 登录</span> -->
<el-form-item label>
<el-input
v-model="loginForm.username"
placeholder="用户名 / 邮箱"
prefix-icon="el-icon-user"
></el-input>
</el-form-item>
<el-form-item label>
<el-input
v-model="loginForm.password"
placeholder="密码"
prefix-icon="el-icon-lock"
show-password
></el-input>
</el-form-item>
<el-form-item label>
<el-checkbox
class="text text-primary"
v-model="loginForm.remember"
>
记住我
</el-checkbox>
<!-- <template v-if="loginConfig.allowRegister">
<div
style="display: inline-block; margin-top: 5px; float: right;"
>
<a
href="#Register"
data-toggle="tab"
style="margin-left: auto; margin-right: auto; position: static; font-size: 15px; margin-top: 5px;"
>
<span>我要注册</span>
</a>
</div>
</template>-->
</el-form-item>
</el-form>
<button class="btn" @click="login">登录</button>
</template>
</div>
<!-- Login3 -->
<div v-if="loginConfig.providers.length > 0" class="center">
<p class="login3">
<span class="left"></span>
第三方登录
<span class="right"></span>
</p>
<el-row>
<el-col :sm="24">
<a
v-for="(mi, i) in loginConfig.providers"
:key="i"
:title="mi.nickName || mi.name"
@click="ssoClick(getUrl(mi))"
>
<img
v-if="mi.logo"
:src="getLogoUrl(mi.logo)"
style="width: 64px; height: 64px"
/>
<template v-else>{{ mi.nickName || mi.name }}</template>
</a>
</el-col>
</el-row>
</div>
</div>
</div>
</template>
<script lang="ts">
import { setMenu } from '@/utils/menu';
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
loginForm: {
username: null,
password: null,
remember: true,
},
};
},
computed: {
sysConfig() {
return this.$store.getters.sysConfig;
},
loginConfig() {
let vm = this;
let loginConfig = vm.$store.getters.loginConfig;
if (!loginConfig) {
loginConfig = {
displayName: '魔方',
logo: '', // 系统logo
allowLogin: true,
allowRegister: true,
providers: [],
};
}
return loginConfig;
},
baseUrl() {
return this.$store.getters.urls.baseUrl;
},
redirect() {
return this.$route.query.redirect;
},
displayName() {
let vm = this as any;
return (
(vm.sysConfig && vm.sysConfig.displayName) ||
(vm.loginConfig && vm.loginConfig.displayName)
);
},
},
created() {
let vm = this;
try {
// 关闭所有弹窗
vm.$messageBox.close();
} catch (error) {}
// 为了本地快速检查是否需要自动跳转第三方登录,使用缓存的配置立即进行检查跳转
vm.autoAuthRedirect();
// 获取一次登录设置,如果跳转了第三方登录,会被强制取消
vm.$api.config.getLoginConfig().then((res: any) => {
let cfg = res.data;
vm.$store.dispatch('setLoginConfig', cfg);
// 获取设登录设置后,再次检查是否需要自动跳转第三方登录
vm.autoAuthRedirect();
});
},
methods: {
login() {
let vm = this;
vm.$api.user.login(vm.loginForm).then(async (response: any) => {
const data = response.data;
let token = data.token;
await vm.$store.dispatch('setToken', token);
// 获取用户信息
vm.$api.user.getUserInfo().then((response: any) => {
const data = response.data;
// 设置用户信息
vm.$store.dispatch('setUserInfo', data);
});
// 获取菜单信息, 将请求回来的菜单转化成路由以及菜单信息
vm.$api.menu.getMenu().then((routeRes: any) => {
const accessedRouters = routeRes.data;
// 保存一份在浏览器
setMenu(accessedRouters);
// 设置路由信息
vm.$store.dispatch('generateRoutes', accessedRouters);
// 添加路由信息
const addRouters = vm.$store.getters.addRouters;
if (addRouters) {
addRouters.forEach((e: any) => {
vm.$router.addRoute(e); // 动态添加可访问路由表
});
}
vm.$router.push({ path: vm.redirect || '/' } as any);
});
// 拉取系统配置信息
vm.$api.config.getObject('/Admin/Sys').then((res: any) => {
const cfg = res.data.value;
vm.$store.dispatch('setSysConfig', cfg);
});
});
},
ssoClick(url: any) {
location.href = this.baseUrl + url;
// location.href = urls.ssoUrl + url
},
getUrl(mi: any) {
// console.log(mi)
let vm = this;
// let name = 'NewLife.Cube'
let url = `/Sso/Login?name=${mi.name}&source=front-end`;
// let url = `/sso/authorize?response_type=token&client_id=${name}`
let redirect_uri = encodeURIComponent(
location.origin +
vm.$router.resolve('/auth-redirect').href +
(vm.redirect ? '?redirect=' + vm.redirect : ''),
);
url += `&redirect_uri=${redirect_uri}`;
return url;
},
getLogoUrl(logo: any) {
let vm = this;
if (logo.indexOf('http') !== 0) {
logo = vm.baseUrl + logo;
}
return logo;
},
autoAuthRedirect() {
// 根据设置,如果不允许密码登录,且只有一个第三方登录,自动跳转
let vm = this;
let loginConfig = vm.loginConfig;
if (
loginConfig &&
!loginConfig.allowLogin &&
loginConfig.providers.length === 1
) {
vm.ssoClick(vm.getUrl(loginConfig.providers[0]));
}
},
},
});
</script>
<!-- Login -->
<style scoped>
.login-logo {
text-align: center;
font-size: 130px;
color: #4ca6ff;
margin-top: 50px;
}
.cube-login {
background: #fff;
padding-bottom: 0;
border-radius: 15px;
text-align: center;
}
.heading {
display: block;
font-size: 24px;
font-weight: 700;
padding: 5px 0;
margin-bottom: 20px;
text-align: center;
}
.cube-login input {
border-radius: 20px;
box-shadow: none;
padding: 0 20px 0 45px;
height: 40px;
transition: all 0.3s ease 0s;
}
.cube-login .text {
float: left;
margin-left: 7px;
line-height: 20px;
padding-top: 5px;
text-transform: capitalize;
}
.cube-login a {
position: absolute;
top: 12px;
right: 0px;
font-size: 17px;
color: #c8c8c8;
transition: all 0.5s ease 0s;
color: #4ca6ff;
}
.el-input input {
border-radius: 20px;
box-shadow: none;
padding: 0 20px 0 45px;
height: 40px;
transition: all 0.3s ease 0s;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
}
.btn {
float: right;
font-size: 14px;
color: #fff;
background: #00b4ef;
/* border-radius: 30px; */
border-radius: 4px;
padding: 8px 50px;
border: none;
text-transform: capitalize;
transition: all 0.5s ease 0s;
margin: -25px 0 15px 0;
width: 100%;
}
.text-primary {
color: #337ab7;
}
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: 700;
}
</style>
<!-- Login3 -->
<style scoped>
p.login3 {
font-size: 22px;
position: relative;
width: 100%;
color: #333;
text-align: center;
}
p.login3 span {
height: 1px;
position: absolute;
background-color: #928f8f;
width: 35%;
top: 50%;
}
p.login3 span.right {
right: 65%;
}
p.login3 span.left {
left: 65%;
}
.center {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
}
@media screen and (max-width: 680px) {
.login-col {
width: 80%;
}
}
@media screen and (min-width: 680px) and (max-width: 1680px) {
.login-col {
width: 30%;
}
}
@media screen and (min-width: 1680px) {
.login-col {
width: 445px;
}
}
</style>
|