forked from github/dataease
Merge pull request #4566 from dataease/pr@dev@feat_dingtalk_mobile
feat(登录): 移动端钉钉工作台免登进入DE
This commit is contained in:
fit2cloud-chenyw
GitHub
commit
55473304d0
@ -84,7 +84,7 @@ public class F2CRealm extends AuthorizingRealm {
|
||||
token = (String) auth.getCredentials();
|
||||
// 解密获得username，用于和数据库进行对比
|
||||
tokenInfo = JWTUtils.tokenInfoByToken(token);
|
||||
if (!TokenCacheUtils.validate(token)) {
|
||||
if (TokenCacheUtils.invalid(token)) {
|
||||
throw new AuthenticationException("token invalid");
|
||||
}
|
||||
} catch (Exception e) {
|
||||
|
||||
@ -66,7 +66,7 @@ public class JWTFilter extends BasicHttpAuthenticationFilter {
|
||||
if (StringUtils.startsWith(authorization, "Basic")) {
|
||||
return false;
|
||||
}
|
||||
if (!TokenCacheUtils.validate(authorization) && !TokenCacheUtils.validateDelay(authorization)) {
|
||||
if (TokenCacheUtils.invalid(authorization)) {
|
||||
throw new AuthenticationException(expireMessage);
|
||||
}
|
||||
// 当没有出现登录超时 且需要刷新token 则执行刷新token
|
||||
@ -75,8 +75,6 @@ public class JWTFilter extends BasicHttpAuthenticationFilter {
|
||||
throw new AuthenticationException(expireMessage);
|
||||
}
|
||||
if (JWTUtils.needRefresh(authorization)) {
|
||||
TokenCacheUtils.addWithTtl(authorization, 1L);
|
||||
TokenCacheUtils.remove(authorization);
|
||||
authorization = refreshToken(request, response);
|
||||
}
|
||||
JWTToken token = new JWTToken(authorization);
|
||||
|
||||
@ -148,7 +148,7 @@ public class AuthServer implements AuthApi {
|
||||
AccountLockStatus lockStatus = authUserService.recordLoginFail(username, 0);
|
||||
DataEaseException.throwException(appendLoginErrorMsg(Translator.get("i18n_id_or_pwd_error"), lockStatus));
|
||||
}
|
||||
if(user.getIsAdmin() && user.getPassword().equals("40b8893ea9ebc2d631c4bb42bb1e8996")){
|
||||
if (user.getIsAdmin() && user.getPassword().equals("40b8893ea9ebc2d631c4bb42bb1e8996")) {
|
||||
result.put("passwordModified", false);
|
||||
}
|
||||
}
|
||||
@ -237,7 +237,7 @@ public class AuthServer implements AuthApi {
|
||||
if (StringUtils.isBlank(result)) {
|
||||
result = "success";
|
||||
}
|
||||
TokenCacheUtils.remove(token);
|
||||
TokenCacheUtils.add(token, userId);
|
||||
} catch (Exception e) {
|
||||
LogUtil.error(e);
|
||||
if (StringUtils.isBlank(result)) {
|
||||
@ -291,7 +291,7 @@ public class AuthServer implements AuthApi {
|
||||
if (StringUtils.isBlank(result)) {
|
||||
result = "success";
|
||||
}
|
||||
TokenCacheUtils.remove(token);
|
||||
TokenCacheUtils.add(token, userId);
|
||||
} catch (Exception e) {
|
||||
LogUtil.error(e);
|
||||
if (StringUtils.isBlank(result)) {
|
||||
|
||||
@ -10,7 +10,6 @@ import com.auth0.jwt.interfaces.Verification;
|
||||
import io.dataease.auth.entity.TokenInfo;
|
||||
import io.dataease.auth.entity.TokenInfo.TokenInfoBuilder;
|
||||
import io.dataease.commons.utils.CommonBeanFactory;
|
||||
import io.dataease.commons.utils.TokenCacheUtils;
|
||||
import io.dataease.exception.DataEaseException;
|
||||
import org.apache.commons.lang3.ObjectUtils;
|
||||
import org.apache.commons.lang3.StringUtils;
|
||||
@ -68,7 +67,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();
|
||||
}
|
||||
|
||||
/**
|
||||
@ -119,7 +119,6 @@ public class JWTUtils {
|
||||
.withClaim("username", tokenInfo.getUsername())
|
||||
.withClaim("userId", tokenInfo.getUserId());
|
||||
String sign = builder.withExpiresAt(date).sign(algorithm);
|
||||
TokenCacheUtils.add(sign, tokenInfo.getUserId());
|
||||
return sign;
|
||||
|
||||
} catch (Exception e) {
|
||||
|
||||
@ -3,36 +3,76 @@ package io.dataease.commons.utils;
|
||||
import io.dataease.listener.util.CacheUtils;
|
||||
import org.apache.commons.lang3.ObjectUtils;
|
||||
import org.apache.commons.lang3.StringUtils;
|
||||
import org.springframework.beans.factory.annotation.Value;
|
||||
import org.springframework.data.redis.core.RedisTemplate;
|
||||
import org.springframework.data.redis.core.ValueOperations;
|
||||
import org.springframework.stereotype.Component;
|
||||
|
||||
import java.util.concurrent.TimeUnit;
|
||||
|
||||
|
||||
@Component
|
||||
public class TokenCacheUtils {
|
||||
|
||||
|
||||
private static final String KEY = "sys_token_store";
|
||||
private static final String DELAY_KEY = "sys_token_store_delay";
|
||||
|
||||
private static String cacheType;
|
||||
|
||||
private static Long expTime;
|
||||
|
||||
@Value("${spring.cache.type:ehcache}")
|
||||
public void setCacheType(String cacheType) {
|
||||
TokenCacheUtils.cacheType = cacheType;
|
||||
}
|
||||
|
||||
@Value("${dataease.login_timeout:480}")
|
||||
public void setExpTime(Long expTime) {
|
||||
TokenCacheUtils.expTime = expTime;
|
||||
}
|
||||
|
||||
private static boolean useRedis() {
|
||||
return StringUtils.equals(cacheType, "redis");
|
||||
}
|
||||
|
||||
|
||||
private static ValueOperations cacheHandler() {
|
||||
RedisTemplate redisTemplate = (RedisTemplate) CommonBeanFactory.getBean("redisTemplate");
|
||||
ValueOperations valueOperations = redisTemplate.opsForValue();
|
||||
return valueOperations;
|
||||
}
|
||||
|
||||
public static void add(String token, Long userId) {
|
||||
CacheUtils.put(KEY, token, userId, null, null);
|
||||
if (useRedis()) {
|
||||
ValueOperations valueOperations = cacheHandler();
|
||||
valueOperations.set(KEY + token, userId, expTime, TimeUnit.MINUTES);
|
||||
return;
|
||||
}
|
||||
|
||||
Long time = expTime * 60;
|
||||
CacheUtils.put(KEY, token, userId, time.intValue(), null);
|
||||
|
||||
}
|
||||
|
||||
public static void remove(String token) {
|
||||
if (useRedis()) {
|
||||
RedisTemplate redisTemplate = (RedisTemplate) CommonBeanFactory.getBean("redisTemplate");
|
||||
String key = KEY + token;
|
||||
if (redisTemplate.hasKey(key)) {
|
||||
redisTemplate.delete(key);
|
||||
}
|
||||
return;
|
||||
}
|
||||
CacheUtils.remove(KEY, token);
|
||||
}
|
||||
|
||||
public static boolean validate(String token) {
|
||||
public static boolean invalid(String token) {
|
||||
if (useRedis()) {
|
||||
RedisTemplate redisTemplate = (RedisTemplate) CommonBeanFactory.getBean("redisTemplate");
|
||||
return redisTemplate.hasKey(KEY + token);
|
||||
}
|
||||
Object sys_token_store = CacheUtils.get(KEY, token);
|
||||
return ObjectUtils.isNotEmpty(sys_token_store) && StringUtils.isNotBlank(sys_token_store.toString());
|
||||
}
|
||||
|
||||
public static boolean validate(String token, Long userId) {
|
||||
Object sys_token_store = CacheUtils.get(KEY, token);
|
||||
return ObjectUtils.isNotEmpty(sys_token_store) && StringUtils.isNotBlank(sys_token_store.toString()) && userId == Long.parseLong(sys_token_store.toString());
|
||||
}
|
||||
|
||||
public static void addWithTtl(String token, Long userId) {
|
||||
CacheUtils.put(DELAY_KEY, token, userId, 3, 5);
|
||||
}
|
||||
|
||||
public static boolean validateDelay(String token) {
|
||||
Object tokenObj = CacheUtils.get(DELAY_KEY, token);
|
||||
return ObjectUtils.isNotEmpty(tokenObj) && StringUtils.isNotBlank(tokenObj.toString());
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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%"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user