mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-22 21:22:33 +08:00
✨ Introducing new features. 登录接口对接，增加滑块验证码
This commit is contained in:
aeizzz
parent
763c416826
commit
68f1636382
@ -2,4 +2,4 @@
|
|||||||
ENV = 'development'
|
ENV = 'development'
|
||||||
|
|
||||||
# 本地环境接口地址
|
# 本地环境接口地址
|
||||||
VITE_API_URL = 'http://localhost:8888/'
|
VITE_API_URL = '/api'
|
||||||
|
|||||||
@ -36,7 +36,8 @@
|
|||||||
"vue-clipboard3": "^2.0.0",
|
"vue-clipboard3": "^2.0.0",
|
||||||
"vue-grid-layout": "^3.0.0-beta1",
|
"vue-grid-layout": "^3.0.0-beta1",
|
||||||
"vue-i18n": "^9.2.2",
|
"vue-i18n": "^9.2.2",
|
||||||
"vue-router": "^4.1.6"
|
"vue-router": "^4.1.6",
|
||||||
|
"crypto-js": "^3.1.9-1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/node": "^18.11.13",
|
"@types/node": "^18.11.13",
|
||||||
|
|||||||
@ -7,21 +7,39 @@ import request from '/@/utils/request';
|
|||||||
* @method signIn 用户登录
|
* @method signIn 用户登录
|
||||||
* @method signOut 用户退出登录
|
* @method signOut 用户退出登录
|
||||||
*/
|
*/
|
||||||
export function useLoginApi() {
|
// export function useLoginApi() {
|
||||||
return {
|
// return {
|
||||||
signIn: (data: object) => {
|
// signIn: (data: object) => {
|
||||||
return request({
|
// return request({
|
||||||
url: '/user/signIn',
|
// url: '/user/signIn',
|
||||||
method: 'post',
|
// method: 'post',
|
||||||
data,
|
// data,
|
||||||
});
|
// });
|
||||||
},
|
// },
|
||||||
signOut: (data: object) => {
|
// signOut: (data: object) => {
|
||||||
return request({
|
// return request({
|
||||||
url: '/user/signOut',
|
// url: '/user/signOut',
|
||||||
method: 'post',
|
// method: 'post',
|
||||||
data,
|
// data,
|
||||||
});
|
// });
|
||||||
},
|
// },
|
||||||
};
|
// };
|
||||||
|
// }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 登录
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export const login = (data: any) => {
|
||||||
|
let basicAuth = 'Basic ' + window.btoa('pig:pig')
|
||||||
|
return request({
|
||||||
|
url: '/admin/oauth2/token',
|
||||||
|
method: 'post',
|
||||||
|
params: data,
|
||||||
|
headers: {
|
||||||
|
isToken: false,
|
||||||
|
'TENANT-ID': '1',
|
||||||
|
'Authorization': basicAuth
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
443
src/components/verifition/Verify.vue
Normal file
443
src/components/verifition/Verify.vue
Normal file
File diff suppressed because one or more lines are too long
262
src/components/verifition/Verify/VerifyPoints.vue
Normal file
262
src/components/verifition/Verify/VerifyPoints.vue
Normal file
@ -0,0 +1,262 @@
|
|||||||
|
<template>
|
||||||
|
<div style="position: relative"
|
||||||
|
>
|
||||||
|
<div class="verify-img-out">
|
||||||
|
<div class="verify-img-panel" :style="{'width': setSize.imgWidth,
|
||||||
|
'height': setSize.imgHeight,
|
||||||
|
'background-size' : setSize.imgWidth + ' '+ setSize.imgHeight,
|
||||||
|
'margin-bottom': vSpace + 'px'}"
|
||||||
|
>
|
||||||
|
<div class="verify-refresh" style="z-index:3" @click="refresh" v-show="showRefresh">
|
||||||
|
<i class="iconfont icon-refresh"></i>
|
||||||
|
</div>
|
||||||
|
<img :src="'data:image/png;base64,'+pointBackImgBase"
|
||||||
|
ref="canvas"
|
||||||
|
alt="" style="width:100%;height:100%;display:block"
|
||||||
|
@click="bindingClick?canvasClick($event):undefined">
|
||||||
|
|
||||||
|
<div v-for="(tempPoint, index) in tempPoints" :key="index" class="point-area"
|
||||||
|
:style="{
|
||||||
|
'background-color':'#1abd6c',
|
||||||
|
color:'#fff',
|
||||||
|
'z-index':9999,
|
||||||
|
width:'20px',
|
||||||
|
height:'20px',
|
||||||
|
'text-align':'center',
|
||||||
|
'line-height':'20px',
|
||||||
|
'border-radius': '50%',
|
||||||
|
position:'absolute',
|
||||||
|
top:parseInt(tempPoint.y-10) + 'px',
|
||||||
|
left:parseInt(tempPoint.x-10) + 'px'
|
||||||
|
}">
|
||||||
|
{{index + 1}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 'height': this.barSize.height, -->
|
||||||
|
<div class="verify-bar-area"
|
||||||
|
:style="{'width': setSize.imgWidth,
|
||||||
|
'color': this.barAreaColor,
|
||||||
|
'border-color': this.barAreaBorderColor,
|
||||||
|
'line-height':this.barSize.height}">
|
||||||
|
<span class="verify-msg">{{text}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script type="text/babel">
|
||||||
|
/**
|
||||||
|
* VerifyPoints
|
||||||
|
* @description 点选
|
||||||
|
* */
|
||||||
|
import {resetSize, _code_chars, _code_color1, _code_color2} from './../utils/util'
|
||||||
|
import {aesEncrypt} from "./../utils/ase"
|
||||||
|
import {reqGet,reqCheck} from "./../api/index"
|
||||||
|
import { computed, onMounted, reactive, ref,watch,nextTick,toRefs, watchEffect,getCurrentInstance} from 'vue';
|
||||||
|
export default {
|
||||||
|
name: 'VerifyPoints',
|
||||||
|
props: {
|
||||||
|
//弹出式pop，固定fixed
|
||||||
|
mode: {
|
||||||
|
type: String,
|
||||||
|
default: 'fixed'
|
||||||
|
},
|
||||||
|
captchaType:{
|
||||||
|
type:String,
|
||||||
|
},
|
||||||
|
//间隔
|
||||||
|
vSpace: {
|
||||||
|
type: Number,
|
||||||
|
default: 5
|
||||||
|
},
|
||||||
|
imgSize: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {
|
||||||
|
width: '310px',
|
||||||
|
height: '155px'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
barSize: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {
|
||||||
|
width: '310px',
|
||||||
|
height: '40px'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setup(props,context){
|
||||||
|
const {mode,captchaType,vSpace,imgSize,barSize} = toRefs(props)
|
||||||
|
const { proxy } = getCurrentInstance();
|
||||||
|
let secretKey = ref(''), //后端返回的ase加密秘钥
|
||||||
|
checkNum = ref(3), //默认需要点击的字数
|
||||||
|
fontPos = reactive([]), //选中的坐标信息
|
||||||
|
checkPosArr = reactive([]), //用户点击的坐标
|
||||||
|
num = ref(1), //点击的记数
|
||||||
|
pointBackImgBase = ref(''), //后端获取到的背景图片
|
||||||
|
poinTextList = reactive([]), //后端返回的点击字体顺序
|
||||||
|
backToken = ref(''), //后端返回的token值
|
||||||
|
setSize = reactive({
|
||||||
|
imgHeight: 0,
|
||||||
|
imgWidth: 0,
|
||||||
|
barHeight: 0,
|
||||||
|
barWidth: 0
|
||||||
|
}),
|
||||||
|
tempPoints = reactive([]),
|
||||||
|
text = ref(''),
|
||||||
|
barAreaColor = ref(undefined),
|
||||||
|
barAreaBorderColor = ref(undefined),
|
||||||
|
showRefresh = ref(true),
|
||||||
|
bindingClick = ref(true)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const init = ()=>{
|
||||||
|
//加载页面
|
||||||
|
fontPos.splice(0, fontPos.length)
|
||||||
|
checkPosArr.splice(0, checkPosArr.length)
|
||||||
|
num.value = 1
|
||||||
|
getPictrue();
|
||||||
|
nextTick(() => {
|
||||||
|
let {imgHeight,imgWidth,barHeight,barWidth} = resetSize(proxy)
|
||||||
|
setSize.imgHeight = imgHeight
|
||||||
|
setSize.imgWidth = imgWidth
|
||||||
|
setSize.barHeight = barHeight
|
||||||
|
setSize.barWidth = barWidth
|
||||||
|
proxy.$parent.$emit('ready', proxy)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
onMounted(()=>{
|
||||||
|
// 禁止拖拽
|
||||||
|
init()
|
||||||
|
proxy.$el.onselectstart = function () {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const canvas = ref(null)
|
||||||
|
const canvasClick = (e)=>{
|
||||||
|
checkPosArr.push(getMousePos(canvas, e));
|
||||||
|
if (num.value == checkNum.value) {
|
||||||
|
num.value = createPoint(getMousePos(canvas, e));
|
||||||
|
//按比例转换坐标值
|
||||||
|
let arr = pointTransfrom(checkPosArr,setSize)
|
||||||
|
checkPosArr.length = 0
|
||||||
|
checkPosArr.push(...arr);
|
||||||
|
//等创建坐标执行完
|
||||||
|
setTimeout(() => {
|
||||||
|
// var flag = this.comparePos(this.fontPos, this.checkPosArr);
|
||||||
|
//发送后端请求
|
||||||
|
var captchaVerification = secretKey.value? aesEncrypt(backToken.value+'---'+JSON.stringify(checkPosArr),secretKey.value):backToken.value+'---'+JSON.stringify(checkPosArr)
|
||||||
|
let data = {
|
||||||
|
captchaType:captchaType.value,
|
||||||
|
"pointJson":secretKey.value? aesEncrypt(JSON.stringify(checkPosArr),secretKey.value):JSON.stringify(checkPosArr),
|
||||||
|
"token":backToken.value
|
||||||
|
}
|
||||||
|
reqCheck(data).then(response=>{
|
||||||
|
let res = response.data;
|
||||||
|
if (res.repCode == "0000") {
|
||||||
|
barAreaColor.value = '#4cae4c'
|
||||||
|
barAreaBorderColor.value = '#5cb85c'
|
||||||
|
text.value = '验证成功'
|
||||||
|
bindingClick.value = false
|
||||||
|
if (mode.value=='pop') {
|
||||||
|
setTimeout(()=>{
|
||||||
|
proxy.$parent.clickShow = false;
|
||||||
|
refresh();
|
||||||
|
},1500)
|
||||||
|
}
|
||||||
|
proxy.$parent.$emit('success', {captchaVerification})
|
||||||
|
}else{
|
||||||
|
proxy.$parent.$emit('error', proxy)
|
||||||
|
barAreaColor.value = '#d9534f'
|
||||||
|
barAreaBorderColor.value = '#d9534f'
|
||||||
|
text.value = '验证失败'
|
||||||
|
setTimeout(() => {
|
||||||
|
refresh();
|
||||||
|
}, 700);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}, 400);
|
||||||
|
}
|
||||||
|
if (num.value < checkNum.value) {
|
||||||
|
num.value = createPoint(getMousePos(canvas, e));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//获取坐标
|
||||||
|
const getMousePos = function (obj, e) {
|
||||||
|
var x = e.offsetX
|
||||||
|
var y = e.offsetY
|
||||||
|
return {x, y}
|
||||||
|
}
|
||||||
|
//创建坐标点
|
||||||
|
const createPoint = function (pos) {
|
||||||
|
tempPoints.push(Object.assign({}, pos))
|
||||||
|
return num.value+1;
|
||||||
|
}
|
||||||
|
const refresh = function () {
|
||||||
|
tempPoints.splice(0, tempPoints.length)
|
||||||
|
barAreaColor.value = '#000'
|
||||||
|
barAreaBorderColor.value = '#ddd'
|
||||||
|
bindingClick.value = true
|
||||||
|
fontPos.splice(0, fontPos.length)
|
||||||
|
checkPosArr.splice(0, checkPosArr.length)
|
||||||
|
num.value = 1
|
||||||
|
getPictrue();
|
||||||
|
text.value = '验证失败'
|
||||||
|
showRefresh.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 请求背景图片和验证图片
|
||||||
|
function getPictrue() {
|
||||||
|
let data = {
|
||||||
|
captchaType:captchaType.value
|
||||||
|
}
|
||||||
|
reqGet(data).then(response=>{
|
||||||
|
let res = response.data;
|
||||||
|
if (res.repCode == "0000") {
|
||||||
|
pointBackImgBase.value = res.repData.originalImageBase64
|
||||||
|
backToken.value = res.repData.token
|
||||||
|
secretKey.value = res.repData.secretKey
|
||||||
|
poinTextList.value = res.repData.wordList
|
||||||
|
text.value = '请依次点击【' + poinTextList.value.join(",") + '】'
|
||||||
|
}else{
|
||||||
|
text.value = res.repMsg;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//坐标转换函数
|
||||||
|
const pointTransfrom = function(pointArr,imgSize){
|
||||||
|
var newPointArr = pointArr.map(p=>{
|
||||||
|
let x = Math.round(310 * p.x/parseInt(imgSize.imgWidth))
|
||||||
|
let y =Math.round(155 * p.y/parseInt(imgSize.imgHeight))
|
||||||
|
return {x,y}
|
||||||
|
})
|
||||||
|
return newPointArr
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
secretKey,
|
||||||
|
checkNum,
|
||||||
|
fontPos,
|
||||||
|
checkPosArr,
|
||||||
|
num,
|
||||||
|
pointBackImgBase,
|
||||||
|
poinTextList,
|
||||||
|
backToken,
|
||||||
|
setSize,
|
||||||
|
tempPoints,
|
||||||
|
text,
|
||||||
|
barAreaColor,
|
||||||
|
barAreaBorderColor,
|
||||||
|
showRefresh,
|
||||||
|
bindingClick,
|
||||||
|
init,
|
||||||
|
canvas,
|
||||||
|
canvasClick,
|
||||||
|
getMousePos,createPoint,refresh,getPictrue,pointTransfrom
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
380
src/components/verifition/Verify/VerifySlide.vue
Normal file
380
src/components/verifition/Verify/VerifySlide.vue
Normal file
@ -0,0 +1,380 @@
|
|||||||
|
<template>
|
||||||
|
<div style="position: relative;">
|
||||||
|
<div v-if="type === '2'" :style="{height: (parseInt(setSize.imgHeight) + vSpace) + 'px'}"
|
||||||
|
class="verify-img-out"
|
||||||
|
>
|
||||||
|
<div :style="{width: setSize.imgWidth,
|
||||||
|
height: setSize.imgHeight,}" class="verify-img-panel">
|
||||||
|
<img :src="'data:image/png;base64,'+backImgBase" alt="" style="width:100%;height:100%;display:block">
|
||||||
|
<div v-show="showRefresh" class="verify-refresh" @click="refresh"><i class="iconfont icon-refresh"></i>
|
||||||
|
</div>
|
||||||
|
<transition name="tips">
|
||||||
|
<span v-if="tipWords" :class="passFlag ?'suc-bg':'err-bg'" class="verify-tips">{{ tipWords }}</span>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 公共部分 -->
|
||||||
|
<div :style="{width: setSize.imgWidth,
|
||||||
|
height: barSize.height,
|
||||||
|
'line-height':barSize.height}" class="verify-bar-area">
|
||||||
|
<span class="verify-msg" v-text="text"></span>
|
||||||
|
<div :style="{width: (leftBarWidth!==undefined)?leftBarWidth: barSize.height, height: barSize.height, 'border-color': leftBarBorderColor, transaction: transitionWidth}"
|
||||||
|
class="verify-left-bar">
|
||||||
|
<span class="verify-msg" v-text="finishText"></span>
|
||||||
|
<div :style="{width: barSize.height, height: barSize.height, 'background-color': moveBlockBackgroundColor, left: moveBlockLeft, transition: transitionLeft}"
|
||||||
|
class="verify-move-block"
|
||||||
|
@mousedown="start"
|
||||||
|
@touchstart="start">
|
||||||
|
<i :class="['verify-icon iconfont', iconClass]"
|
||||||
|
:style="{color: iconColor}"></i>
|
||||||
|
<div v-if="type === '2'" :style="{'width':Math.floor(parseInt(setSize.imgWidth)*47/310)+ 'px',
|
||||||
|
'height': setSize.imgHeight,
|
||||||
|
'top':'-' + (parseInt(setSize.imgHeight) + vSpace) + 'px',
|
||||||
|
'background-size': setSize.imgWidth + ' ' + setSize.imgHeight,
|
||||||
|
}"
|
||||||
|
class="verify-sub-block">
|
||||||
|
<img :src="'data:image/png;base64,'+blockBackImgBase" alt=""
|
||||||
|
style="width:100%;height:100%;display:block;-webkit-user-drag:none;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script type="text/babel">
|
||||||
|
/**
|
||||||
|
* VerifySlide
|
||||||
|
* @description 滑块
|
||||||
|
* */
|
||||||
|
import {aesEncrypt} from "./../utils/ase"
|
||||||
|
import {resetSize} from './../utils/util'
|
||||||
|
import {reqCheck, reqGet} from "./../api/index"
|
||||||
|
import {computed, defineComponent, getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs, watch} from 'vue';
|
||||||
|
// "captchaType":"blockPuzzle",
|
||||||
|
export default {
|
||||||
|
name: 'VerifySlide',
|
||||||
|
props: {
|
||||||
|
captchaType: {
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: '1'
|
||||||
|
},
|
||||||
|
//弹出式pop，固定fixed
|
||||||
|
mode: {
|
||||||
|
type: String,
|
||||||
|
default: 'fixed'
|
||||||
|
},
|
||||||
|
vSpace: {
|
||||||
|
type: Number,
|
||||||
|
default: 5
|
||||||
|
},
|
||||||
|
explain: {
|
||||||
|
type: String,
|
||||||
|
default: '向右滑动完成验证'
|
||||||
|
},
|
||||||
|
imgSize: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {
|
||||||
|
width: '310px',
|
||||||
|
height: '155px'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
blockSize: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {
|
||||||
|
width: '50px',
|
||||||
|
height: '50px'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
barSize: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {
|
||||||
|
width: '310px',
|
||||||
|
height: '40px'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setup(props, context) {
|
||||||
|
const {mode, captchaType, vSpace, imgSize, barSize, type, blockSize, explain} = toRefs(props)
|
||||||
|
const { proxy } = getCurrentInstance();
|
||||||
|
let secretKey = ref(''), //后端返回的ase加密秘钥
|
||||||
|
passFlag = ref(''), //是否通过的标识
|
||||||
|
backImgBase = ref(''), //验证码背景图片
|
||||||
|
blockBackImgBase = ref(''), //验证滑块的背景图片
|
||||||
|
backToken = ref(''), //后端返回的唯一token值
|
||||||
|
startMoveTime = ref(''), //移动开始的时间
|
||||||
|
endMovetime = ref(''), //移动结束的时间
|
||||||
|
tipsBackColor = ref(''), //提示词的背景颜色
|
||||||
|
tipWords = ref(''),
|
||||||
|
text = ref(''),
|
||||||
|
finishText = ref(''),
|
||||||
|
setSize = reactive({
|
||||||
|
imgHeight: 0,
|
||||||
|
imgWidth: 0,
|
||||||
|
barHeight: 0,
|
||||||
|
barWidth: 0
|
||||||
|
}),
|
||||||
|
top = ref(0),
|
||||||
|
left = ref(0),
|
||||||
|
moveBlockLeft = ref(undefined),
|
||||||
|
leftBarWidth = ref(undefined),
|
||||||
|
// 移动中样式
|
||||||
|
moveBlockBackgroundColor = ref(undefined),
|
||||||
|
leftBarBorderColor = ref('#ddd'),
|
||||||
|
iconColor = ref(undefined),
|
||||||
|
iconClass = ref('icon-right'),
|
||||||
|
status = ref(false), //鼠标状态
|
||||||
|
isEnd = ref(false), //是够验证完成
|
||||||
|
showRefresh = ref(true),
|
||||||
|
transitionLeft = ref(''),
|
||||||
|
transitionWidth = ref(''),
|
||||||
|
startLeft = ref(0)
|
||||||
|
|
||||||
|
const barArea = computed(() => {
|
||||||
|
return proxy.$el.querySelector('.verify-bar-area')
|
||||||
|
})
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
text.value = explain.value
|
||||||
|
getPictrue();
|
||||||
|
nextTick(() => {
|
||||||
|
let {imgHeight, imgWidth, barHeight, barWidth} = resetSize(proxy)
|
||||||
|
setSize.imgHeight = imgHeight
|
||||||
|
setSize.imgWidth = imgWidth
|
||||||
|
setSize.barHeight = barHeight
|
||||||
|
setSize.barWidth = barWidth
|
||||||
|
proxy.$parent.$emit('ready', proxy)
|
||||||
|
})
|
||||||
|
|
||||||
|
window.removeEventListener("touchmove", function (e) {
|
||||||
|
move(e);
|
||||||
|
});
|
||||||
|
window.removeEventListener("mousemove", function (e) {
|
||||||
|
move(e);
|
||||||
|
});
|
||||||
|
|
||||||
|
//鼠标松开
|
||||||
|
window.removeEventListener("touchend", function () {
|
||||||
|
end();
|
||||||
|
});
|
||||||
|
window.removeEventListener("mouseup", function () {
|
||||||
|
end();
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("touchmove", function (e) {
|
||||||
|
move(e);
|
||||||
|
});
|
||||||
|
window.addEventListener("mousemove", function (e) {
|
||||||
|
move(e);
|
||||||
|
});
|
||||||
|
|
||||||
|
//鼠标松开
|
||||||
|
window.addEventListener("touchend", function () {
|
||||||
|
end();
|
||||||
|
});
|
||||||
|
window.addEventListener("mouseup", function () {
|
||||||
|
end();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(type, () => {
|
||||||
|
init()
|
||||||
|
})
|
||||||
|
onMounted(() => {
|
||||||
|
// 禁止拖拽
|
||||||
|
init()
|
||||||
|
proxy.$el.onselectstart = function () {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
//鼠标按下
|
||||||
|
function start(e) {
|
||||||
|
e = e || window.event
|
||||||
|
if (!e.touches) { //兼容PC端
|
||||||
|
var x = e.clientX;
|
||||||
|
} else { //兼容移动端
|
||||||
|
var x = e.touches[0].pageX;
|
||||||
|
}
|
||||||
|
console.log(barArea);
|
||||||
|
startLeft.value = Math.floor(x - barArea.value.getBoundingClientRect().left);
|
||||||
|
startMoveTime.value = +new Date(); //开始滑动的时间
|
||||||
|
if (isEnd.value == false) {
|
||||||
|
text.value = ''
|
||||||
|
moveBlockBackgroundColor.value = '#337ab7'
|
||||||
|
leftBarBorderColor.value = '#337AB7'
|
||||||
|
iconColor.value = '#fff'
|
||||||
|
e.stopPropagation();
|
||||||
|
status.value = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//鼠标移动
|
||||||
|
function move(e) {
|
||||||
|
e = e || window.event
|
||||||
|
if (status.value && isEnd.value == false) {
|
||||||
|
if (!e.touches) { //兼容PC端
|
||||||
|
var x = e.clientX;
|
||||||
|
} else { //兼容移动端
|
||||||
|
var x = e.touches[0].pageX;
|
||||||
|
}
|
||||||
|
var bar_area_left = barArea.value.getBoundingClientRect().left;
|
||||||
|
var move_block_left = x - bar_area_left //小方块相对于父元素的left值
|
||||||
|
if (move_block_left >= barArea.value.offsetWidth - parseInt(parseInt(blockSize.value.width) / 2) - 2) {
|
||||||
|
move_block_left = barArea.value.offsetWidth - parseInt(parseInt(blockSize.value.width) / 2) - 2;
|
||||||
|
}
|
||||||
|
if (move_block_left <= 0) {
|
||||||
|
move_block_left = parseInt(parseInt(blockSize.value.width) / 2);
|
||||||
|
}
|
||||||
|
//拖动后小方块的left值
|
||||||
|
moveBlockLeft.value = (move_block_left - startLeft.value) + "px"
|
||||||
|
leftBarWidth.value = (move_block_left - startLeft.value) + "px"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//鼠标松开
|
||||||
|
function end() {
|
||||||
|
endMovetime.value = +new Date();
|
||||||
|
//判断是否重合
|
||||||
|
if (status.value && isEnd.value == false) {
|
||||||
|
var moveLeftDistance = parseInt((moveBlockLeft.value || '').replace('px', ''));
|
||||||
|
moveLeftDistance = moveLeftDistance * 310 / parseInt(setSize.imgWidth)
|
||||||
|
let data = {
|
||||||
|
captchaType: captchaType.value,
|
||||||
|
"pointJson": secretKey.value ? aesEncrypt(JSON.stringify({
|
||||||
|
x: moveLeftDistance,
|
||||||
|
y: 5.0
|
||||||
|
}), secretKey.value) : JSON.stringify({x: moveLeftDistance, y: 5.0}),
|
||||||
|
"token": backToken.value
|
||||||
|
}
|
||||||
|
reqCheck(data).then(response => {
|
||||||
|
let res = response.data;
|
||||||
|
if (res.repCode == "0000") {
|
||||||
|
moveBlockBackgroundColor.value = '#5cb85c'
|
||||||
|
leftBarBorderColor.value = '#5cb85c'
|
||||||
|
iconColor.value = '#fff'
|
||||||
|
iconClass.value = 'icon-check'
|
||||||
|
showRefresh.value = false
|
||||||
|
isEnd.value = true;
|
||||||
|
if (mode.value == 'pop') {
|
||||||
|
setTimeout(() => {
|
||||||
|
proxy.$parent.clickShow = false;
|
||||||
|
refresh();
|
||||||
|
}, 1500)
|
||||||
|
}
|
||||||
|
passFlag.value = true
|
||||||
|
tipWords.value = `${((endMovetime.value - startMoveTime.value) / 1000).toFixed(2)}s验证成功`
|
||||||
|
var captchaVerification = secretKey.value ? aesEncrypt(backToken.value + '---' + JSON.stringify({
|
||||||
|
x: moveLeftDistance,
|
||||||
|
y: 5.0
|
||||||
|
}), secretKey.value) : backToken.value + '---' + JSON.stringify({x: moveLeftDistance, y: 5.0})
|
||||||
|
setTimeout(() => {
|
||||||
|
tipWords.value = ""
|
||||||
|
proxy.$parent.$parent.closeBox();
|
||||||
|
proxy.$parent.$parent.$emit('success', {captchaVerification})
|
||||||
|
}, 1000)
|
||||||
|
} else {
|
||||||
|
moveBlockBackgroundColor.value = '#d9534f'
|
||||||
|
leftBarBorderColor.value = '#d9534f'
|
||||||
|
iconColor.value = '#fff'
|
||||||
|
iconClass.value = 'icon-close'
|
||||||
|
passFlag.value = false
|
||||||
|
setTimeout(function () {
|
||||||
|
refresh();
|
||||||
|
}, 1000);
|
||||||
|
proxy.$parent.$emit('error', proxy)
|
||||||
|
tipWords.value = "验证失败"
|
||||||
|
setTimeout(() => {
|
||||||
|
tipWords.value = ""
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
status.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const refresh = () => {
|
||||||
|
showRefresh.value = true
|
||||||
|
finishText.value = ''
|
||||||
|
|
||||||
|
transitionLeft.value = 'left .3s'
|
||||||
|
moveBlockLeft.value = 0
|
||||||
|
|
||||||
|
leftBarWidth.value = undefined
|
||||||
|
transitionWidth.value = 'width .3s'
|
||||||
|
|
||||||
|
leftBarBorderColor.value = '#ddd'
|
||||||
|
moveBlockBackgroundColor.value = '#fff'
|
||||||
|
iconColor.value = '#000'
|
||||||
|
iconClass.value = 'icon-right'
|
||||||
|
isEnd.value = false
|
||||||
|
|
||||||
|
getPictrue()
|
||||||
|
setTimeout(() => {
|
||||||
|
transitionWidth.value = ''
|
||||||
|
transitionLeft.value = ''
|
||||||
|
text.value = explain.value
|
||||||
|
}, 300)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 请求背景图片和验证图片
|
||||||
|
function getPictrue() {
|
||||||
|
let data = {
|
||||||
|
captchaType: captchaType.value
|
||||||
|
}
|
||||||
|
reqGet(data).then(response => {
|
||||||
|
let res = response.data;
|
||||||
|
if (res.repCode == "0000") {
|
||||||
|
backImgBase.value = res.repData.originalImageBase64
|
||||||
|
blockBackImgBase.value = res.repData.jigsawImageBase64
|
||||||
|
backToken.value = res.repData.token
|
||||||
|
secretKey.value = res.repData.secretKey
|
||||||
|
} else {
|
||||||
|
tipWords.value = res.repMsg;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
secretKey, //后端返回的ase加密秘钥
|
||||||
|
passFlag, //是否通过的标识
|
||||||
|
backImgBase, //验证码背景图片
|
||||||
|
blockBackImgBase, //验证滑块的背景图片
|
||||||
|
backToken, //后端返回的唯一token值
|
||||||
|
startMoveTime, //移动开始的时间
|
||||||
|
endMovetime, //移动结束的时间
|
||||||
|
tipsBackColor, //提示词的背景颜色
|
||||||
|
tipWords,
|
||||||
|
text,
|
||||||
|
finishText,
|
||||||
|
setSize,
|
||||||
|
top,
|
||||||
|
left,
|
||||||
|
moveBlockLeft,
|
||||||
|
leftBarWidth,
|
||||||
|
// 移动中样式
|
||||||
|
moveBlockBackgroundColor,
|
||||||
|
leftBarBorderColor,
|
||||||
|
iconColor,
|
||||||
|
iconClass,
|
||||||
|
status, //鼠标状态
|
||||||
|
isEnd, //是够验证完成
|
||||||
|
showRefresh,
|
||||||
|
transitionLeft,
|
||||||
|
transitionWidth,
|
||||||
|
barArea,
|
||||||
|
refresh,
|
||||||
|
start
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
26
src/components/verifition/api/index.ts
Normal file
26
src/components/verifition/api/index.ts
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
/**
|
||||||
|
* 此处可直接引用自己项目封装好的 axios 配合后端联调
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
import request from '/@/utils/request';
|
||||||
|
|
||||||
|
//获取验证图片 以及token
|
||||||
|
export function reqGet(data: Object) {
|
||||||
|
return request({
|
||||||
|
url: '/admin/code/create',
|
||||||
|
method: 'get',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//滑动或者点选验证
|
||||||
|
export function reqCheck(data: Object) {
|
||||||
|
return request({
|
||||||
|
url: '/admin/code/check',
|
||||||
|
method: 'post',
|
||||||
|
params: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
11
src/components/verifition/utils/ase.js
Normal file
11
src/components/verifition/utils/ase.js
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import CryptoJS from 'crypto-js'
|
||||||
|
/**
|
||||||
|
* @word 要加密的内容
|
||||||
|
* @keyWord String 服务器随机返回的关键字
|
||||||
|
* */
|
||||||
|
export function aesEncrypt(word,keyWord="XwKsGlMcdPMEhR1B"){
|
||||||
|
var key = CryptoJS.enc.Utf8.parse(keyWord);
|
||||||
|
var srcs = CryptoJS.enc.Utf8.parse(word);
|
||||||
|
var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
|
||||||
|
return encrypted.toString();
|
||||||
|
}
|
||||||
30
src/components/verifition/utils/axios.js
Normal file
30
src/components/verifition/utils/axios.js
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
axios.defaults.baseURL = 'https://captcha.anji-plus.com/captcha-api';
|
||||||
|
|
||||||
|
const service = axios.create({
|
||||||
|
timeout: 40000,
|
||||||
|
headers: {
|
||||||
|
'X-Requested-With': 'XMLHttpRequest',
|
||||||
|
'Content-Type': 'application/json; charset=UTF-8'
|
||||||
|
},
|
||||||
|
})
|
||||||
|
service.interceptors.request.use(
|
||||||
|
config => {
|
||||||
|
return config
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// response interceptor
|
||||||
|
service.interceptors.response.use(
|
||||||
|
response => {
|
||||||
|
const res = response.data;
|
||||||
|
return res
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
}
|
||||||
|
)
|
||||||
|
export default service
|
||||||
35
src/components/verifition/utils/util.js
Normal file
35
src/components/verifition/utils/util.js
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
export function resetSize(vm) {
|
||||||
|
var img_width, img_height, bar_width, bar_height; //图片的宽度、高度，移动条的宽度、高度
|
||||||
|
|
||||||
|
var parentWidth = vm.$el.parentNode.offsetWidth || window.offsetWidth
|
||||||
|
var parentHeight = vm.$el.parentNode.offsetHeight || window.offsetHeight
|
||||||
|
if (vm.imgSize.width.indexOf('%') != -1) {
|
||||||
|
img_width = parseInt(vm.imgSize.width) / 100 * parentWidth + 'px'
|
||||||
|
} else {
|
||||||
|
img_width = vm.imgSize.width;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (vm.imgSize.height.indexOf('%') != -1) {
|
||||||
|
img_height = parseInt(vm.imgSize.height) / 100 * parentHeight + 'px'
|
||||||
|
} else {
|
||||||
|
img_height = vm.imgSize.height
|
||||||
|
}
|
||||||
|
|
||||||
|
if (vm.barSize.width.indexOf('%') != -1) {
|
||||||
|
bar_width = parseInt(vm.barSize.width) / 100 * parentWidth + 'px'
|
||||||
|
} else {
|
||||||
|
bar_width = vm.barSize.width
|
||||||
|
}
|
||||||
|
|
||||||
|
if (vm.barSize.height.indexOf('%') != -1) {
|
||||||
|
bar_height = parseInt(vm.barSize.height) / 100 * parentHeight + 'px'
|
||||||
|
} else {
|
||||||
|
bar_height = vm.barSize.height
|
||||||
|
}
|
||||||
|
|
||||||
|
return {imgWidth: img_width, imgHeight: img_height, barWidth: bar_width, barHeight: bar_height}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const _code_chars = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
|
||||||
|
export const _code_color1 = ['#fffff0', '#f0ffff', '#f0fff0', '#fff0f0']
|
||||||
|
export const _code_color2 = ['#FF0033', '#006699', '#993366', '#FF9900', '#66CC66', '#FF33CC']
|
||||||
@ -93,10 +93,7 @@ export default {
|
|||||||
dropdownSmall: 'small',
|
dropdownSmall: 'small',
|
||||||
dropdown1: 'home page',
|
dropdown1: 'home page',
|
||||||
dropdown2: 'Personal Center',
|
dropdown2: 'Personal Center',
|
||||||
dropdown3: '404',
|
|
||||||
dropdown4: '401',
|
|
||||||
dropdown5: 'Log out',
|
dropdown5: 'Log out',
|
||||||
dropdown6: 'Code warehouse',
|
|
||||||
searchPlaceholder: 'Menu search: support Chinese, routing path',
|
searchPlaceholder: 'Menu search: support Chinese, routing path',
|
||||||
newTitle: 'notice',
|
newTitle: 'notice',
|
||||||
newBtn: 'All read',
|
newBtn: 'All read',
|
||||||
|
|||||||
@ -93,10 +93,7 @@ export default {
|
|||||||
dropdownSmall: '小型',
|
dropdownSmall: '小型',
|
||||||
dropdown1: '首页',
|
dropdown1: '首页',
|
||||||
dropdown2: '个人中心',
|
dropdown2: '个人中心',
|
||||||
dropdown3: '404',
|
|
||||||
dropdown4: '401',
|
|
||||||
dropdown5: '退出登录',
|
dropdown5: '退出登录',
|
||||||
dropdown6: '代码仓库',
|
|
||||||
searchPlaceholder: '菜单搜索：支持中文、路由路径',
|
searchPlaceholder: '菜单搜索：支持中文、路由路径',
|
||||||
newTitle: '通知',
|
newTitle: '通知',
|
||||||
newBtn: '全部已读',
|
newBtn: '全部已读',
|
||||||
|
|||||||
@ -93,10 +93,7 @@ export default {
|
|||||||
dropdownSmall: '小型',
|
dropdownSmall: '小型',
|
||||||
dropdown1: '首頁',
|
dropdown1: '首頁',
|
||||||
dropdown2: '個人中心',
|
dropdown2: '個人中心',
|
||||||
dropdown3: '404',
|
|
||||||
dropdown4: '401',
|
|
||||||
dropdown5: '登出',
|
dropdown5: '登出',
|
||||||
dropdown6: '程式碼倉庫',
|
|
||||||
searchPlaceholder: '選單蒐索：支援中文、路由路徑',
|
searchPlaceholder: '選單蒐索：支援中文、路由路徑',
|
||||||
newTitle: '通知',
|
newTitle: '通知',
|
||||||
newBtn: '全部已讀',
|
newBtn: '全部已讀',
|
||||||
|
|||||||
@ -68,10 +68,7 @@
|
|||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<el-dropdown-menu>
|
<el-dropdown-menu>
|
||||||
<el-dropdown-item command="/home">{{ $t('user.dropdown1') }}</el-dropdown-item>
|
<el-dropdown-item command="/home">{{ $t('user.dropdown1') }}</el-dropdown-item>
|
||||||
<el-dropdown-item command="wareHouse">{{ $t('user.dropdown6') }}</el-dropdown-item>
|
|
||||||
<el-dropdown-item command="/personal">{{ $t('user.dropdown2') }}</el-dropdown-item>
|
<el-dropdown-item command="/personal">{{ $t('user.dropdown2') }}</el-dropdown-item>
|
||||||
<el-dropdown-item command="/404">{{ $t('user.dropdown3') }}</el-dropdown-item>
|
|
||||||
<el-dropdown-item command="/401">{{ $t('user.dropdown4') }}</el-dropdown-item>
|
|
||||||
<el-dropdown-item divided command="logOut">{{ $t('user.dropdown5') }}</el-dropdown-item>
|
<el-dropdown-item divided command="logOut">{{ $t('user.dropdown5') }}</el-dropdown-item>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -228,25 +228,5 @@ export const staticRoutes: Array<RouteRecordRaw> = [
|
|||||||
meta: {
|
meta: {
|
||||||
title: '登录',
|
title: '登录',
|
||||||
},
|
},
|
||||||
},
|
}
|
||||||
/**
|
|
||||||
* 提示：写在这里的为全屏界面，不建议写在这里
|
|
||||||
* 请写在 `dynamicRoutes` 路由数组中
|
|
||||||
*/
|
|
||||||
{
|
|
||||||
path: '/visualizingDemo1',
|
|
||||||
name: 'visualizingDemo1',
|
|
||||||
component: () => import('/@/views/visualizing/demo1.vue'),
|
|
||||||
meta: {
|
|
||||||
title: 'router.visualizingLinkDemo1',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/visualizingDemo2',
|
|
||||||
name: 'visualizingDemo2',
|
|
||||||
component: () => import('/@/views/visualizing/demo2.vue'),
|
|
||||||
meta: {
|
|
||||||
title: 'router.visualizingLinkDemo2',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|||||||
@ -78,7 +78,7 @@ export const useThemeConfig = defineStore('themeConfig', {
|
|||||||
* 界面显示
|
* 界面显示
|
||||||
*/
|
*/
|
||||||
// 是否开启侧边栏 Logo
|
// 是否开启侧边栏 Logo
|
||||||
isShowLogo: false,
|
isShowLogo: true,
|
||||||
// 初始化变量，用于 el-scrollbar 的高度更新，请勿删除
|
// 初始化变量，用于 el-scrollbar 的高度更新，请勿删除
|
||||||
isShowLogoChange: false,
|
isShowLogoChange: false,
|
||||||
// 是否开启 Breadcrumb，强制经典、横向布局不显示
|
// 是否开启 Breadcrumb，强制经典、横向布局不显示
|
||||||
@ -104,7 +104,7 @@ export const useThemeConfig = defineStore('themeConfig', {
|
|||||||
// 是否开启水印
|
// 是否开启水印
|
||||||
isWartermark: true,
|
isWartermark: true,
|
||||||
// 水印文案
|
// 水印文案
|
||||||
wartermarkText: 'vue-next-admin',
|
wartermarkText: 'PigX',
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 其它设置
|
* 其它设置
|
||||||
@ -137,9 +137,9 @@ export const useThemeConfig = defineStore('themeConfig', {
|
|||||||
* 全局网站标题 / 副标题
|
* 全局网站标题 / 副标题
|
||||||
*/
|
*/
|
||||||
// 网站主标题（菜单导航、浏览器当前网页标题）
|
// 网站主标题（菜单导航、浏览器当前网页标题）
|
||||||
globalTitle: 'vue-next-admin',
|
globalTitle: 'PigX 快速开发框架',
|
||||||
// 网站副标题（登录页顶部文字）
|
// 网站副标题（登录页顶部文字）
|
||||||
globalViceTitle: 'vueNextAdmin',
|
globalViceTitle: 'PigX 快速开发框架',
|
||||||
// 网站副标题（登录页顶部文字）
|
// 网站副标题（登录页顶部文字）
|
||||||
globalViceTitleMsg: '专注、免费、开源、维护、解疑',
|
globalViceTitleMsg: '专注、免费、开源、维护、解疑',
|
||||||
// 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn
|
// 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn
|
||||||
@ -147,6 +147,7 @@ export const useThemeConfig = defineStore('themeConfig', {
|
|||||||
// 默认全局组件大小，可选值"<large|'default'|small>"，默认 'large'
|
// 默认全局组件大小，可选值"<large|'default'|small>"，默认 'large'
|
||||||
globalComponentSize: 'large',
|
globalComponentSize: 'large',
|
||||||
},
|
},
|
||||||
|
|
||||||
}),
|
}),
|
||||||
actions: {
|
actions: {
|
||||||
setThemeConfig(data: ThemeConfigState) {
|
setThemeConfig(data: ThemeConfigState) {
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
import { defineStore } from 'pinia';
|
import { defineStore } from 'pinia';
|
||||||
import Cookies from 'js-cookie';
|
import Cookies from 'js-cookie';
|
||||||
import { Session } from '/@/utils/storage';
|
import { Session } from '/@/utils/storage';
|
||||||
|
import { login } from '/@//api/login/index'
|
||||||
|
import other from '/@/utils/other'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 用户信息
|
* 用户信息
|
||||||
@ -17,6 +19,33 @@ export const useUserInfo = defineStore('userInfo', {
|
|||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
actions: {
|
actions: {
|
||||||
|
async login(data: any){
|
||||||
|
data.grant_type = 'password'
|
||||||
|
data.scope = 'server'
|
||||||
|
// 密码加密
|
||||||
|
const user = other.encryption({
|
||||||
|
data: data,
|
||||||
|
key: 'pigxpigxpigxpigx',
|
||||||
|
param: ['password']
|
||||||
|
})
|
||||||
|
console.log(user,'user')
|
||||||
|
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
login(user).then(res =>{
|
||||||
|
// 存储token 信息
|
||||||
|
console.log(res.data,'login data')
|
||||||
|
Session.set('token', res.data.access_token);
|
||||||
|
// 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
|
||||||
|
Cookies.set('userName', res.data.username);
|
||||||
|
resolve(res)
|
||||||
|
}).then((err) => {
|
||||||
|
console.log(err)
|
||||||
|
reject(err)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
async setUserInfos() {
|
async setUserInfos() {
|
||||||
// 存储用户信息到浏览器缓存
|
// 存储用户信息到浏览器缓存
|
||||||
if (Session.get('userInfo')) {
|
if (Session.get('userInfo')) {
|
||||||
|
|||||||
@ -8,6 +8,8 @@ import { useThemeConfig } from '/@/stores/themeConfig';
|
|||||||
import { i18n } from '/@/i18n/index';
|
import { i18n } from '/@/i18n/index';
|
||||||
import { Local } from '/@/utils/storage';
|
import { Local } from '/@/utils/storage';
|
||||||
import { verifyUrl } from '/@/utils/toolsValidate';
|
import { verifyUrl } from '/@/utils/toolsValidate';
|
||||||
|
// @ts-ignore
|
||||||
|
import * as CryptoJS from "crypto-js";
|
||||||
|
|
||||||
// 引入组件
|
// 引入组件
|
||||||
const SvgIcon = defineAsyncComponent(() => import('/@/components/svgIcon/index.vue'));
|
const SvgIcon = defineAsyncComponent(() => import('/@/components/svgIcon/index.vue'));
|
||||||
@ -172,6 +174,34 @@ export function handleOpenLink(val: RouteItem) {
|
|||||||
else window.open(`${origin}${pathname}#${val.meta?.isLink}`);
|
else window.open(`${origin}${pathname}#${val.meta?.isLink}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
*加密处理
|
||||||
|
*/
|
||||||
|
export function encryption(params: any) {
|
||||||
|
let { data, type, param, key } = params;
|
||||||
|
const result = JSON.parse(JSON.stringify(data));
|
||||||
|
if (type === "Base64") {
|
||||||
|
param.forEach((ele: any) => {
|
||||||
|
result[ele] = btoa(result[ele]);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
param.forEach((ele: any) => {
|
||||||
|
var data = result[ele];
|
||||||
|
key = CryptoJS.enc.Latin1.parse(key);
|
||||||
|
var iv = key;
|
||||||
|
// 加密
|
||||||
|
var encrypted = CryptoJS.AES.encrypt(data, key, {
|
||||||
|
iv: iv,
|
||||||
|
mode: CryptoJS.mode.CFB,
|
||||||
|
padding: CryptoJS.pad.NoPadding
|
||||||
|
});
|
||||||
|
result[ele] = encrypted.toString();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 统一批量导出
|
* 统一批量导出
|
||||||
* @method elSvg 导出全局注册 element plus svg 图标
|
* @method elSvg 导出全局注册 element plus svg 图标
|
||||||
@ -212,6 +242,9 @@ const other = {
|
|||||||
handleOpenLink: (val: RouteItem) => {
|
handleOpenLink: (val: RouteItem) => {
|
||||||
handleOpenLink(val);
|
handleOpenLink(val);
|
||||||
},
|
},
|
||||||
|
encryption: (data: any) => {
|
||||||
|
return encryption(data)
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 统一批量导出
|
// 统一批量导出
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-form size="large" class="login-content-form">
|
<el-form size="large" class="login-content-form">
|
||||||
<el-form-item class="login-animation1">
|
<el-form-item class="login-animation1">
|
||||||
<el-input text :placeholder="$t('account.accountPlaceholder1')" v-model="state.ruleForm.userName" clearable autocomplete="off">
|
<el-input text :placeholder="$t('account.accountPlaceholder1')" v-model="state.ruleForm.username" clearable autocomplete="off">
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<el-icon class="el-input__icon"><ele-User /></el-icon>
|
<el-icon class="el-input__icon"><ele-User /></el-icon>
|
||||||
</template>
|
</template>
|
||||||
@ -27,28 +27,37 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item class="login-animation3">
|
<el-form-item>
|
||||||
<el-col :span="15">
|
<Verify
|
||||||
<el-input
|
@success="verifySuccess"
|
||||||
text
|
:mode="'pop'"
|
||||||
maxlength="4"
|
:captchaType="'blockPuzzle'"
|
||||||
:placeholder="$t('account.accountPlaceholder3')"
|
:imgSize="{ width: '330px', height: '155px' }"
|
||||||
v-model="state.ruleForm.code"
|
ref="verifyref"
|
||||||
clearable
|
/>
|
||||||
autocomplete="off"
|
</el-form-item>
|
||||||
>
|
<!-- <el-form-item class="login-animation3">-->
|
||||||
<template #prefix>
|
<!-- <el-col :span="15">-->
|
||||||
<el-icon class="el-input__icon"><ele-Position /></el-icon>
|
<!-- <el-input-->
|
||||||
</template>
|
<!-- text-->
|
||||||
</el-input>
|
<!-- maxlength="4"-->
|
||||||
</el-col>
|
<!-- :placeholder="$t('account.accountPlaceholder3')"-->
|
||||||
<el-col :span="1"></el-col>
|
<!-- v-model="state.ruleForm.code"-->
|
||||||
<el-col :span="8">
|
<!-- clearable-->
|
||||||
<el-button class="login-content-code" v-waves>1234</el-button>
|
<!-- autocomplete="off"-->
|
||||||
</el-col>
|
<!-- >-->
|
||||||
</el-form-item>
|
<!-- <template #prefix>-->
|
||||||
|
<!-- <el-icon class="el-input__icon"><ele-Position /></el-icon>-->
|
||||||
|
<!-- </template>-->
|
||||||
|
<!-- </el-input>-->
|
||||||
|
<!-- </el-col>-->
|
||||||
|
<!-- <el-col :span="1"></el-col>-->
|
||||||
|
<!-- <el-col :span="8">-->
|
||||||
|
<!-- <el-button class="login-content-code" v-waves>1234</el-button>-->
|
||||||
|
<!-- </el-col>-->
|
||||||
|
<!-- </el-form-item>-->
|
||||||
<el-form-item class="login-animation4">
|
<el-form-item class="login-animation4">
|
||||||
<el-button type="primary" class="login-content-submit" round v-waves @click="onSignIn" :loading="state.loading.signIn">
|
<el-button type="primary" class="login-content-submit" round v-waves @click="handleLogin" :loading="state.loading.signIn">
|
||||||
<span>{{ $t('account.accountBtnText') }}</span>
|
<span>{{ $t('account.accountBtnText') }}</span>
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@ -56,7 +65,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts" name="loginAccount">
|
<script setup lang="ts" name="loginAccount">
|
||||||
import { reactive, computed } from 'vue';
|
import {reactive, computed, defineAsyncComponent, ref} from 'vue';
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
import { ElMessage } from 'element-plus';
|
import { ElMessage } from 'element-plus';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
@ -68,6 +77,9 @@ import { initBackEndControlRoutes } from '/@/router/backEnd';
|
|||||||
import { Session } from '/@/utils/storage';
|
import { Session } from '/@/utils/storage';
|
||||||
import { formatAxis } from '/@/utils/formatTime';
|
import { formatAxis } from '/@/utils/formatTime';
|
||||||
import { NextLoading } from '/@/utils/loading';
|
import { NextLoading } from '/@/utils/loading';
|
||||||
|
import { useUserInfo } from '/@/stores/userInfo'
|
||||||
|
|
||||||
|
const Verify = defineAsyncComponent(() => import('/@/components/verifition/Verify.vue'))
|
||||||
|
|
||||||
// 定义变量内容
|
// 定义变量内容
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
@ -78,26 +90,33 @@ const router = useRouter();
|
|||||||
const state = reactive({
|
const state = reactive({
|
||||||
isShowPassword: false,
|
isShowPassword: false,
|
||||||
ruleForm: {
|
ruleForm: {
|
||||||
userName: 'admin',
|
username: 'admin',
|
||||||
password: '123456',
|
password: '123456',
|
||||||
code: '1234',
|
code: '',
|
||||||
|
randomStr: 'blockPuzzle'
|
||||||
},
|
},
|
||||||
loading: {
|
loading: {
|
||||||
signIn: false,
|
signIn: false,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
// @ts-ignore
|
||||||
|
const verifyref = ref<InstanceType<typeof Verify>>(null)
|
||||||
|
|
||||||
// 时间获取
|
// 时间获取
|
||||||
const currentTime = computed(() => {
|
const currentTime = computed(() => {
|
||||||
return formatAxis(new Date());
|
return formatAxis(new Date());
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const handleLogin = () => {
|
||||||
|
verifyref.value.show();
|
||||||
|
}
|
||||||
// 登录
|
// 登录
|
||||||
const onSignIn = async () => {
|
const onSignIn = async () => {
|
||||||
state.loading.signIn = true;
|
state.loading.signIn = true;
|
||||||
// 存储 token 到浏览器缓存
|
// 存储 token 到浏览器缓存
|
||||||
Session.set('token', Math.random().toString(36).substr(0));
|
await useUserInfo().login(state.ruleForm)
|
||||||
// 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
|
// 进行登录
|
||||||
Cookies.set('userName', state.ruleForm.userName);
|
|
||||||
if (!themeConfig.value.isRequestRoutes) {
|
if (!themeConfig.value.isRequestRoutes) {
|
||||||
// 前端控制路由，2、请注意执行顺序
|
// 前端控制路由，2、请注意执行顺序
|
||||||
const isNoPower = await initFrontEndControlRoutes();
|
const isNoPower = await initFrontEndControlRoutes();
|
||||||
@ -136,6 +155,11 @@ const signInSuccess = (isNoPower: boolean | undefined) => {
|
|||||||
}
|
}
|
||||||
state.loading.signIn = false;
|
state.loading.signIn = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const verifySuccess = (params: any) => {
|
||||||
|
state.ruleForm.code = params.captchaVerification;
|
||||||
|
onSignIn()
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
@ -28,11 +28,11 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
|
|||||||
open: env.VITE_OPEN,
|
open: env.VITE_OPEN,
|
||||||
hmr: true,
|
hmr: true,
|
||||||
proxy: {
|
proxy: {
|
||||||
'/gitee': {
|
'/api/': {
|
||||||
target: 'https://gitee.com',
|
target: 'http://localhost:9999/',
|
||||||
ws: true,
|
ws: true,
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
rewrite: (path) => path.replace(/^\/gitee/, ''),
|
rewrite: (path) => path.replace(/^\/api/, ''),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user