feat(登录): 移动端钉钉工作台免登进入DE

This commit is contained in:
fit2cloud-chenyw 2023-02-17 18:37:19 +08:00
parent f8c837be64
commit ee3ad5e0dd
5 changed files with 582 additions and 540 deletions

View File

@ -68,7 +68,8 @@ public class JWTUtils {
public static boolean needRefresh(String token) {
Date exp = JWTUtils.getExp(token);
return new Date().getTime() >= exp.getTime();
Long advanceTime = 5000L;
return (new Date().getTime() + advanceTime) >= exp.getTime();
}
/**

View File

@ -18,9 +18,13 @@ import {
changeFavicon
} from '@/utils/index'
import Layout from '@/layout/index'
import { getSysUI } from '@/utils/auth'
import {
getSysUI
} from '@/utils/auth'
import { getSocket } from '@/websocket'
import {
getSocket
} from '@/websocket'
NProgress.configure({
showSpinner: false
@ -53,14 +57,19 @@ const routeBefore = (callBack) => {
callBack()
}
}
router.beforeEach(async (to, from, next) => routeBefore(() => {
router.beforeEach(async(to, from, next) => routeBefore(() => {
// start progress bar
NProgress.start()
const mobileIgnores = ['/delink']
const mobileIgnores = ['/delink', '/de-auto-login']
const mobilePreview = '/preview/'
const hasToken = getToken()
if (isMobile() && !to.path.includes(mobilePreview) && mobileIgnores.indexOf(to.path) === -1) {
window.location.href = window.origin + '/app.html'
let urlSuffix = '/app.html'
if (hasToken) {
urlSuffix += ('?detoken=' + hasToken)
}
window.location.href = window.origin + urlSuffix
NProgress.done()
}
@ -68,7 +77,7 @@ router.beforeEach(async (to, from, next) => routeBefore(() => {
document.title = getPageTitle(to.meta.title)
// determine whether the user has logged in
const hasToken = getToken()
if (hasToken) {
if (to.path === '/login') {
// if is logged in, redirect to the home page

View File

@ -142,4 +142,17 @@ export function parseLanguage() {
const language = getLanguage()
if(language === 'sys') return uni.getLocale()
return language
}
}
export function getUrlParams(url){
const Params = {}
if(url.indexOf('?')>0){//判断是否有qurey
let parmas = url.slice(url.indexOf('?')+1)//截取出query
const paramlists = parmas.split('&')//分割键值对
for (const param of paramlists) {
let a = param.split('=')
Object.assign(Params,{[a[0]]:a[1]})//将键值对封装成对象
}
}
return Params
}

View File

@ -1,192 +1,192 @@
{
"pages": [
"pages": [
{
"path": "pages/login/index",
"style": {
"navigationBarTitleText": "%navigate.login%",
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/tabBar/home/index",
"style": {
"navigationBarTitleText": "%navigate.menuHome%",
"app-plus": {
"titleNView": false
{
"path": "pages/login/index",
"style": {
"navigationBarTitleText": "%navigate.login%",
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/tabBar/home/index",
"style": {
"navigationBarTitleText": "%navigate.menuHome%",
"app-plus": {
"titleNView": false
},
"enablePullDownRefresh": true
}
},
{
"path": "pages/tabBar/home/detail",
"style": {
"navigationBarTitleText": "",
"app-plus": {
"titleNView": false,
"bounce": "none"
}
}
},
{
"path": "pages/tabBar/dir/index",
"style": {
"navigationBarTitleText": "%navigate.menuDir%",
"app-plus": {
"titleNView": {
"type": "transparent",
"titleColor": "#fff",
"backgroundColor": "#0faeff",
"buttons": [],
"searchInput": {
"backgroundColor": "#fff",
"borderRadius": "6px",
"placeholder": "%searchPlaceholder%",
"disabled": true
}
}
},
"enablePullDownRefresh": true
}
},
{
"path": "pages/tabBar/dir/search",
"style": {
"navigationBarTitleText": "%navigate.search%",
"app-plus": {
"titleNView": {
"titleColor": "#fff",
"backgroundColor": "#0faeff",
"searchInput": {
"backgroundColor": "#fff",
"borderRadius": "6px",
"placeholder": "%searchPlaceholder%",
"autoFocus": true
}
}
}
"enablePullDownRefresh": true
}
},
{
"path": "pages/tabBar/home/detail",
"style": {
"navigationBarTitleText": "",
"app-plus": {
"titleNView": false,
"bounce": "none"
}
}
},
{
"path": "pages/tabBar/dir/index",
"style": {
"navigationBarTitleText": "%navigate.menuDir%",
"app-plus": {
"titleNView": {
"type": "transparent",
"titleColor": "#fff",
"backgroundColor": "#0faeff",
"buttons": [],
"searchInput": {
"backgroundColor": "#fff",
"borderRadius": "6px",
"placeholder": "%searchPlaceholder%",
"disabled": true
}
}
},
{
"path": "pages/tabBar/dir/folder",
"style": {
"navigationBarTitleText": "",
"app-plus": {
"titleNView": {
"type": "transparent"
}
},
"h5": {
"titleNView": {
"type": "transparent",
"buttons": []
}
}
"enablePullDownRefresh": true
}
},
{
"path": "pages/tabBar/dir/search",
"style": {
"navigationBarTitleText": "%navigate.search%",
"app-plus": {
"titleNView": {
"titleColor": "#fff",
"backgroundColor": "#0faeff",
"searchInput": {
"backgroundColor": "#fff",
"borderRadius": "6px",
"placeholder": "%searchPlaceholder%",
"autoFocus": true
}
}
}
}
},
{
"path": "pages/tabBar/dir/folder",
"style": {
"navigationBarTitleText": "",
"app-plus": {
"titleNView": {
"type": "transparent"
}
},
{
"path": "pages/tabBar/me/index",
"style": {
"navigationBarTitleText": "%navigate.menuMe%",
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/tabBar/me/person",
"style": {
"navigationBarTitleText": "%navigate.personInfo%",
"app-plus": {
"titleNView": {
"type": "transparent"
}
}
}
},
{
"path": "pages/tabBar/me/language",
"style": {
"navigationBarTitleText": "%navigate.language%",
"app-plus": {
"titleNView": {
"type": "transparent"
}
}
}
},
{
"path": "pages/tabBar/me/about",
"style": {
"navigationBarTitleText": "%navigate.about%",
"app-plus": {
"titleNView": {
"type": "transparent"
}
}
}
},
{
"path": "pages/tabBar/me/outlink",
"style": {
"navigationBarTitleText": "",
"app-plus": {
"titleNView": {
"type": "transparent"
}
}
}
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "%app.name%",
"h5": {
"maxWidth": 1190,
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#F1F1F1"
}
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "%app.name%",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#ffffff"
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#007AFF",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/tabBar/home/index",
"iconPath": "static/home.png",
"selectedIconPath": "static/home_select.png",
"text": "%navigate.menuHome%"
},
{
"pagePath": "pages/tabBar/dir/index",
"iconPath": "static/dir.png",
"selectedIconPath": "static/dir_select.png",
"text": "%navigate.menuDir%"
}, {
"pagePath": "pages/tabBar/me/index",
"iconPath": "static/me.png",
"selectedIconPath": "static/me_select.png",
"text": "%navigate.menuMe%"
}
]
}
}
"h5": {
"titleNView": {
"type": "transparent",
"buttons": []
}
}
}
},
{
"path": "pages/tabBar/me/index",
"style": {
"navigationBarTitleText": "%navigate.menuMe%",
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/tabBar/me/person",
"style": {
"navigationBarTitleText": "%navigate.personInfo%",
"app-plus": {
"titleNView": {
"type": "transparent"
}
}
}
},
{
"path": "pages/tabBar/me/language",
"style": {
"navigationBarTitleText": "%navigate.language%",
"app-plus": {
"titleNView": {
"type": "transparent"
}
}
}
},
{
"path": "pages/tabBar/me/about",
"style": {
"navigationBarTitleText": "%navigate.about%",
"app-plus": {
"titleNView": {
"type": "transparent"
}
}
}
},
{
"path": "pages/tabBar/me/outlink",
"style": {
"navigationBarTitleText": "",
"app-plus": {
"titleNView": {
"type": "transparent"
}
}
}
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "%app.name%",
"h5": {
"maxWidth": 1190,
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#F1F1F1"
}
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "%app.name%",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#ffffff"
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#007AFF",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/tabBar/home/index",
"iconPath": "static/home.png",
"selectedIconPath": "static/home_select.png",
"text": "%navigate.menuHome%"
},
{
"pagePath": "pages/tabBar/dir/index",
"iconPath": "static/dir.png",
"selectedIconPath": "static/dir_select.png",
"text": "%navigate.menuDir%"
}, {
"pagePath": "pages/tabBar/me/index",
"iconPath": "static/me.png",
"selectedIconPath": "static/me_select.png",
"text": "%navigate.menuMe%"
}
]
}
}

View File

@ -1,385 +1,404 @@
<template>
<view
v-if="axiosFinished"
:class="mobileBG ? 'content-de' : 'content'"
:style="mobileBG ? {background:'url(' + mobileBG + ') no-repeat', 'backgroundSize':'cover'} : ''"
>
<view class="input-group" >
<view class="input-row">
<text class="welcome">{{$t('login.title')}}</text>
</view>
<view class="input-row border">
<text class="title">{{$t('login.account')}}</text>
<m-input class="m-input" type="text" clearable focus v-model="username" :placeholder="$t('login.accountPlaceholder')"></m-input>
</view>
<view class="input-row border">
<text class="title">{{$t('login.password')}}</text>
<m-input type="password" displayable v-model="password" :placeholder="$t('login.passwordPlaceholder')"></m-input>
</view>
</view>
<view class="btn-row">
<button type="primary" class="primary" :loading="loginBtnLoading" @tap="bindLogin">{{$t('login.loginbtn')}}</button>
</view>
</view>
<view v-if="axiosFinished" :class="mobileBG ? 'content-de' : 'content'"
:style="mobileBG ? {background:'url(' + mobileBG + ') no-repeat', 'backgroundSize':'cover'} : ''">
<view class="input-group">
<view class="input-row">
<text class="welcome">{{$t('login.title')}}</text>
</view>
<view class="input-row border">
<text class="title">{{$t('login.account')}}</text>
<m-input class="m-input" type="text" clearable focus v-model="username"
:placeholder="$t('login.accountPlaceholder')"></m-input>
</view>
<view class="input-row border">
<text class="title">{{$t('login.password')}}</text>
<m-input type="password" displayable v-model="password" :placeholder="$t('login.passwordPlaceholder')">
</m-input>
</view>
</view>
<view class="btn-row">
<button type="primary" class="primary" :loading="loginBtnLoading"
@tap="bindLogin">{{$t('login.loginbtn')}}</button>
</view>
</view>
</template>
<script>
import {
mapState,
mapMutations
} from 'vuex'
import mInput from '../../components/m-input.vue'
import {login, getInfo, getPublicKey, getUIinfo } from '@/api/auth'
import {encrypt, setLocalPK, getLocalPK, setToken, getToken, setUserInfo, getUserInfo } from '@/common/utils'
import {
mapState,
mapMutations
} from 'vuex'
import mInput from '../../components/m-input.vue'
import {
login,
getInfo,
getPublicKey,
getUIinfo
} from '@/api/auth'
import {
encrypt,
setLocalPK,
getLocalPK,
setToken,
getToken,
setUserInfo,
getUserInfo,
getUrlParams
} from '@/common/utils'
export default {
components: {
mInput
},
data() {
return {
username: '',
loginBtnLoading: false,
password: '',
mobileBG: null,
axiosFinished: false
}
},
computed: mapState(['forcedLogin', 'hasLogin', 'univerifyErrorMsg', 'hideUniverify']),
onLoad() {
uni.showLoading({
title: this.$t('commons.loading')
});
this.loadUiInfo()
this.loadPublicKey()
if(getToken() && getUserInfo()) {
this.toMain()
export default {
components: {
mInput
},
data() {
return {
username: '',
loginBtnLoading: false,
password: '',
mobileBG: null,
axiosFinished: false
}
},
computed: mapState(['forcedLogin', 'hasLogin', 'univerifyErrorMsg', 'hideUniverify']),
onLoad() {
uni.showLoading({
title: this.$t('commons.loading')
});
this.loadUiInfo()
this.loadPublicKey()
if (!this.autoLogin() && getToken() && getUserInfo()) {
this.toMain()
}
},
methods: {
...mapMutations(['login']),
async loginByPwd() {
if (this.username.length < 1) {
uni.showToast({
icon: 'none',
title: this.$t('login.accFmtError')
});
return;
}
if (this.password.length < 1) {
uni.showToast({
icon: 'none',
title: this.$t('login.passwordPlaceholder')
});
return;
}
const data = {
username: encrypt(this.username),
password: encrypt(this.password)
};
this.loginBtnLoading = true
login(data).then(res => {
if (res.success) {
setToken(res.data.token)
this.toMain()
}
}).catch(error => {
this.loginBtnLoading = false
uni.showToast({
icon: 'error',
title: error.response.data.message,
});
})
},
bindLogin() {
this.loginByPwd()
},
toMain(userName) {
getInfo().then(res => {
setUserInfo(res.data)
uni.reLaunch({
url: '../tabBar/home/index',
});
})
},
loadUiInfo() {
getUIinfo().then(res => {
const list = res.data
list.forEach(item => {
if (item.paramKey === 'ui.mobileBG' && item.paramValue) {
this.mobileBG = '/system/ui/image/' + item.paramValue
return false
}
},
methods: {
...mapMutations(['login']),
async loginByPwd() {
if (this.username.length < 1) {
uni.showToast({
icon: 'none',
title: this.$t('login.accFmtError')
});
return;
}
if (this.password.length < 1) {
uni.showToast({
icon: 'none',
title: this.$t('login.passwordPlaceholder')
});
return;
}
const data = {
username: encrypt(this.username),
password: encrypt(this.password)
};
this.loginBtnLoading = true
login(data).then(res => {
if(res.success) {
setToken(res.data.token)
this.toMain()
}
}).catch(error => {
this.loginBtnLoading = false
uni.showToast({
icon: 'error',
title: error.response.data.message,
});
})
},
bindLogin() {
this.loginByPwd()
},
toMain(userName) {
getInfo().then(res => {
setUserInfo(res.data)
uni.reLaunch({
url: '../tabBar/home/index',
});
})
},
loadUiInfo() {
getUIinfo().then(res => {
const list = res.data
list.forEach(item => {
if(item.paramKey === 'ui.mobileBG' && item.paramValue) {
this.mobileBG = '/system/ui/image/' + item.paramValue
return false
}
})
setTimeout(() => {
uni.hideLoading()
this.axiosFinished = true
}, 1500)
})
},
})
setTimeout(() => {
uni.hideLoading()
this.axiosFinished = true
}, 1500)
loadPublicKey() {
if(!getLocalPK()) {
getPublicKey().then(res => {
setLocalPK(res.data)
})
}
},
},
onReady() {
}
}
})
},
loadPublicKey() {
if (!getLocalPK()) {
getPublicKey().then(res => {
setLocalPK(res.data)
})
}
},
autoLogin() {
const url = window.location.href
const param = getUrlParams(url)
if (param?.detoken) {
setToken(param.detoken)
this.toMain()
return true
}
return false
}
},
onReady() {
}
}
</script>
<style>
@import "@/components/m-icon/m-icon.css";
@import "@/components/m-icon/m-icon.css";
/*每个页面公共css */
page {
min-height: 100%;
display: flex;
font-size: 14px;
}
/*每个页面公共css */
page {
min-height: 100%;
display: flex;
font-size: 14px;
}
input,
textarea,
button {
font-size: 14px;
}
input,
textarea,
button {
font-size: 14px;
}
/* #ifdef MP-BAIDU */
page {
width: 100%;
height: 100%;
display: block;
}
/* #ifdef MP-BAIDU */
page {
width: 100%;
height: 100%;
display: block;
}
swan-template {
width: 100%;
min-height: 100%;
display: flex;
}
swan-template {
width: 100%;
min-height: 100%;
display: flex;
}
/* 原生组件模式下需要注意组件外部样式 */
custom-component {
width: 100%;
min-height: 100%;
display: flex;
}
/* 原生组件模式下需要注意组件外部样式 */
custom-component {
width: 100%;
min-height: 100%;
display: flex;
}
/* #endif */
/* #endif */
/* #ifdef MP-ALIPAY */
page {
min-height: 100vh;
}
/* #ifdef MP-ALIPAY */
page {
min-height: 100vh;
}
/* #endif */
/* #endif */
/* 原生组件模式下需要注意组件外部样式 */
m-input {
width: 100%;
/* min-height: 100%; */
display: flex;
flex: 1;
}
/* 原生组件模式下需要注意组件外部样式 */
m-input {
width: 100%;
/* min-height: 100%; */
display: flex;
flex: 1;
}
.content {
display: flex;
flex: 1;
flex-direction: column;
background-color: #000000;
background-image: url(../../static/logo-bg.jpg);
padding: 10px;
justify-content: center;
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.75;
}
.content-de {
display: flex;
flex: 1;
flex-direction: column;
background-color: #000000;
padding: 10px;
justify-content: center;
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.75;
}
.content {
display: flex;
flex: 1;
flex-direction: column;
background-color: #000000;
background-image: url(../../static/logo-bg.jpg);
padding: 10px;
justify-content: center;
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.75;
}
.input-group {
background-color: #ffffff;
margin-top: 20px;
position: relative;
opacity: 0.95;
border-radius: 10px;
overflow: hidden;
}
.content-de {
display: flex;
flex: 1;
flex-direction: column;
background-color: #000000;
padding: 10px;
justify-content: center;
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.75;
}
.input-group::before {
position: absolute;
right: 0;
top: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.input-group {
background-color: #ffffff;
margin-top: 20px;
position: relative;
opacity: 0.95;
border-radius: 10px;
overflow: hidden;
}
.input-group::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.input-group::before {
position: absolute;
right: 0;
top: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.input-row {
display: flex;
flex-direction: row;
position: relative;
/* font-size: 18px; */
height: 50px;
line-height: 50px;
}
.input-group::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.input-row .title {
width: 70px;
padding-left: 15px;
}
.input-row {
display: flex;
flex-direction: row;
position: relative;
/* font-size: 18px; */
height: 50px;
line-height: 50px;
}
.input-row.border::after {
position: absolute;
right: 0;
bottom: 0;
left: 8px;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.input-row .title {
width: 70px;
padding-left: 15px;
}
.btn-row {
margin-top: 10px;
padding: 10px 0;
}
.input-row.border::after {
position: absolute;
right: 0;
bottom: 0;
left: 8px;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
button.primary {
background-color: #0faeff;
line-height: 40px;
border-radius: 5px;
overflow: hidden;
}
.login-type {
display: flex;
justify-content: center;
}
.btn-row {
margin-top: 10px;
padding: 10px 0;
}
.login-type-btn {
line-height: 30px;
margin: 0px 15px;
}
button.primary {
background-color: #0faeff;
line-height: 40px;
border-radius: 5px;
overflow: hidden;
}
.login-type-btn.act {
color: #0FAEFF;
border-bottom: solid 1px #0FAEFF;
}
.login-type {
display: flex;
justify-content: center;
}
.send-code-btn {
width: 120px;
text-align: center;
background-color: #0FAEFF;
color: #FFFFFF;
}
.login-type-btn {
line-height: 30px;
margin: 0px 15px;
}
.action-row {
display: flex;
flex-direction: row;
justify-content: center;
}
.login-type-btn.act {
color: #0FAEFF;
border-bottom: solid 1px #0FAEFF;
}
.action-row navigator {
color: #007aff;
padding: 0 10px;
}
.send-code-btn {
width: 120px;
text-align: center;
background-color: #0FAEFF;
color: #FFFFFF;
}
.oauth-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.action-row {
display: flex;
flex-direction: row;
justify-content: center;
}
.oauth-image {
position: relative;
width: 50px;
height: 50px;
border: 1px solid #dddddd;
border-radius: 50px;
background-color: #ffffff;
}
.action-row navigator {
color: #007aff;
padding: 0 10px;
}
.oauth-image image {
width: 30px;
height: 30px;
margin: 10px;
}
.oauth-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.oauth-image button {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.oauth-image {
position: relative;
width: 50px;
height: 50px;
border: 1px solid #dddddd;
border-radius: 50px;
background-color: #ffffff;
}
.captcha-view {
line-height: 0;
justify-content: center;
align-items: center;
display: flex;
position: relative;
background-color: #f3f3f3;
}
.welcome {
padding-left: 15px;
font-size: x-large;
font-weight: 500;
letter-spacing: 2px;
}
</style>
.oauth-image image {
width: 30px;
height: 30px;
margin: 10px;
}
.oauth-image button {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.captcha-view {
line-height: 0;
justify-content: center;
align-items: center;
display: flex;
position: relative;
background-color: #f3f3f3;
}
.welcome {
padding-left: 15px;
font-size: x-large;
font-weight: 500;
letter-spacing: 2px;
}
</style>