mirrors/pig-ui
1
0
Fork 0
mirror of https://gitee.com/log4j/pig-ui.git synced 2024-12-22 21:22:33 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ Introducing new features. 登录接口对接，增加滑块验证码

Browse Source
This commit is contained in:
aeizzz 2023-01-31 10:33:47 +08:00
parent 763c416826
commit 68f1636382
20 changed files with 1348 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@ -2,4 +2,4 @@
ENV = 'development'
# 本地环境接口地址
VITE_API_URL = 'http://localhost:8888/'
VITE_API_URL = '/api'

3
package.json
View File

@ -36,7 +36,8 @@
"vue-clipboard3": "^2.0.0",
"vue-grid-layout": "^3.0.0-beta1",
"vue-i18n": "^9.2.2",
"vue-router": "^4.1.6"
"vue-router": "^4.1.6",
"crypto-js": "^3.1.9-1"
},
"devDependencies": {
"@types/node": "^18.11.13",

48
src/api/login/index.ts
View File

@ -7,21 +7,39 @@ import request from '/@/utils/request';
* @method signIn 用户登录
* @method signOut 用户退出登录
*/
export function useLoginApi() {
return {
signIn: (data: object) => {
// export function useLoginApi() {
// return {
// signIn: (data: object) => {
// return request({
// url: '/user/signIn',
// method: 'post',
// data,
// });
// },
// signOut: (data: object) => {
// return request({
// url: '/user/signOut',
// method: 'post',
// data,
// });
// },
// };
// }
/**
* 登录
* @param data
*/
export const login = (data: any) => {
let basicAuth = 'Basic ' + window.btoa('pig:pig')
return request({
url: '/user/signIn',
url: '/admin/oauth2/token',
method: 'post',
data,
});
},
signOut: (data: object) => {
return request({
url: '/user/signOut',
method: 'post',
data,
});
},
};
params: data,
headers: {
isToken: false,
'TENANT-ID': '1',
'Authorization': basicAuth
}
})
}

443
src/components/verifition/Verify.vue Normal file
View File

File diff suppressed because one or more lines are too long

262
src/components/verifition/Verify/VerifyPoints.vue Normal file
View 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
View 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
View 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
View 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
View 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
View 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']

3
src/i18n/lang/en.ts
View File

@ -93,10 +93,7 @@ export default {
dropdownSmall: 'small',
dropdown1: 'home page',
dropdown2: 'Personal Center',
dropdown3: '404',
dropdown4: '401',
dropdown5: 'Log out',
dropdown6: 'Code warehouse',
searchPlaceholder: 'Menu search: support Chinese, routing path',
newTitle: 'notice',
newBtn: 'All read',

3
src/i18n/lang/zh-cn.ts
View File

@ -93,10 +93,7 @@ export default {
dropdownSmall: '小型',
dropdown1: '首页',
dropdown2: '个人中心',
dropdown3: '404',
dropdown4: '401',
dropdown5: '退出登录',
dropdown6: '代码仓库',
searchPlaceholder: '菜单搜索：支持中文、路由路径',
newTitle: '通知',
newBtn: '全部已读',

3
src/i18n/lang/zh-tw.ts
View File

@ -93,10 +93,7 @@ export default {
dropdownSmall: '小型',
dropdown1: '首頁',
dropdown2: '個人中心',
dropdown3: '404',
dropdown4: '401',
dropdown5: '登出',
dropdown6: '程式碼倉庫',
searchPlaceholder: '選單蒐索：支援中文、路由路徑',
newTitle: '通知',
newBtn: '全部已讀',

3
src/layout/navBars/breadcrumb/user.vue
View File

@ -68,10 +68,7 @@
<template #dropdown>
<el-dropdown-menu>
<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="/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-menu>
</template>

22
src/router/route.ts
View File

@ -228,25 +228,5 @@ export const staticRoutes: Array<RouteRecordRaw> = [
meta: {
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',
},
},
}
];

9
src/stores/themeConfig.ts
View File

@ -78,7 +78,7 @@ export const useThemeConfig = defineStore('themeConfig', {
* 界面显示
*/
// 是否开启侧边栏 Logo
isShowLogo: false,
isShowLogo: true,
// 初始化变量，用于 el-scrollbar 的高度更新，请勿删除
isShowLogoChange: false,
// 是否开启 Breadcrumb，强制经典、横向布局不显示
@ -104,7 +104,7 @@ export const useThemeConfig = defineStore('themeConfig', {
// 是否开启水印
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: '专注、免费、开源、维护、解疑',
// 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn
@ -147,6 +147,7 @@ export const useThemeConfig = defineStore('themeConfig', {
// 默认全局组件大小，可选值"<large|'default'|small>"，默认 'large'
globalComponentSize: 'large',
},
}),
actions: {
setThemeConfig(data: ThemeConfigState) {

29
src/stores/userInfo.ts
View File

@ -1,6 +1,8 @@
import { defineStore } from 'pinia';
import Cookies from 'js-cookie';
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: {
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() {
// 存储用户信息到浏览器缓存
if (Session.get('userInfo')) {

33
src/utils/other.ts
View File

@ -8,6 +8,8 @@ import { useThemeConfig } from '/@/stores/themeConfig';
import { i18n } from '/@/i18n/index';
import { Local } from '/@/utils/storage';
import { verifyUrl } from '/@/utils/toolsValidate';
// @ts-ignore
import * as CryptoJS from "crypto-js";
// 引入组件
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}`);
}
/**
*加密处理
*/
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 图标
@ -212,6 +242,9 @@ const other = {
handleOpenLink: (val: RouteItem) => {
handleOpenLink(val);
},
encryption: (data: any) => {
return encryption(data)
}
};
// 统一批量导出

78
src/views/login/component/account.vue
View File

@ -1,7 +1,7 @@
<template>
<el-form size="large" class="login-content-form">
<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>
<el-icon class="el-input__icon"><ele-User /></el-icon>
</template>
@ -27,28 +27,37 @@
</template>
</el-input>
</el-form-item>
<el-form-item class="login-animation3">
<el-col :span="15">
<el-input
text
maxlength="4"
:placeholder="$t('account.accountPlaceholder3')"
v-model="state.ruleForm.code"
clearable
autocomplete="off"
>
<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>
<Verify
@success="verifySuccess"
:mode="'pop'"
:captchaType="'blockPuzzle'"
:imgSize="{ width: '330px', height: '155px' }"
ref="verifyref"
/>
</el-form-item>
<!-- <el-form-item class="login-animation3">-->
<!-- <el-col :span="15">-->
<!-- <el-input-->
<!-- text-->
<!-- maxlength="4"-->
<!-- :placeholder="$t('account.accountPlaceholder3')"-->
<!-- v-model="state.ruleForm.code"-->
<!-- clearable-->
<!-- autocomplete="off"-->
<!-- >-->
<!-- <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-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>
</el-button>
</el-form-item>
@ -56,7 +65,7 @@
</template>
<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 { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
@ -68,6 +77,9 @@ import { initBackEndControlRoutes } from '/@/router/backEnd';
import { Session } from '/@/utils/storage';
import { formatAxis } from '/@/utils/formatTime';
import { NextLoading } from '/@/utils/loading';
import { useUserInfo } from '/@/stores/userInfo'
const Verify = defineAsyncComponent(() => import('/@/components/verifition/Verify.vue'))
// 定义变量内容
const { t } = useI18n();
@ -78,26 +90,33 @@ const router = useRouter();
const state = reactive({
isShowPassword: false,
ruleForm: {
userName: 'admin',
username: 'admin',
password: '123456',
code: '1234',
code: '',
randomStr: 'blockPuzzle'
},
loading: {
signIn: false,
},
});
// @ts-ignore
const verifyref = ref<InstanceType<typeof Verify>>(null)
// 时间获取
const currentTime = computed(() => {
return formatAxis(new Date());
});
const handleLogin = () => {
verifyref.value.show();
}
// 登录
const onSignIn = async () => {
state.loading.signIn = true;
// 存储 token 到浏览器缓存
Session.set('token', Math.random().toString(36).substr(0));
// 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
Cookies.set('userName', state.ruleForm.userName);
await useUserInfo().login(state.ruleForm)
// 进行登录
if (!themeConfig.value.isRequestRoutes) {
// 前端控制路由，2、请注意执行顺序
const isNoPower = await initFrontEndControlRoutes();
@ -136,6 +155,11 @@ const signInSuccess = (isNoPower: boolean | undefined) => {
}
state.loading.signIn = false;
};
const verifySuccess = (params: any) => {
state.ruleForm.code = params.captchaVerification;
onSignIn()
}
</script>
<style scoped lang="scss">

6
vite.config.ts
View File

@ -28,11 +28,11 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
open: env.VITE_OPEN,
hmr: true,
proxy: {
'/gitee': {
target: 'https://gitee.com',
'/api/': {
target: 'http://localhost:9999/',
ws: true,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/gitee/, ''),
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},