登录联调
This commit is contained in:
parent
4210eb10e2
commit
5052ab0e56
|
|
@ -5,4 +5,4 @@ VITE_APP_TITLE = 智奇管理系统
|
||||||
VITE_APP_ENV = 'development'
|
VITE_APP_ENV = 'development'
|
||||||
|
|
||||||
# 智奇管理系统/开发环境
|
# 智奇管理系统/开发环境
|
||||||
VITE_APP_BASE_API = '/dev-api'
|
VITE_APP_BASE_API = 'http://124.70.134.24:48106'
|
||||||
|
|
|
||||||
107
src/api/login.js
107
src/api/login.js
|
|
@ -1,50 +1,59 @@
|
||||||
// 静态登录方法
|
import request from '@/utils/request'
|
||||||
const staticUser = {
|
|
||||||
username: 'admin',
|
// 登录方法
|
||||||
password: 'admin123',
|
export function login(username, password, code, uuid) {
|
||||||
token: 'static-token',
|
const data = {
|
||||||
userId: 1,
|
username,
|
||||||
userName: 'admin',
|
password,
|
||||||
avatar: '',
|
code,
|
||||||
roles: ['admin'],
|
uuid
|
||||||
permissions: ['*:*:*']
|
}
|
||||||
};
|
return request({
|
||||||
|
url: '/login',
|
||||||
// 登录方法
|
headers: {
|
||||||
export function login(username, password, code, uuid) {
|
isToken: false
|
||||||
return new Promise((resolve, reject) => {
|
},
|
||||||
if (username === staticUser.username && password === staticUser.password) {
|
method: 'post',
|
||||||
resolve({ token: staticUser.token });
|
data: data
|
||||||
} else {
|
})
|
||||||
reject(new Error('账号或密码错误'));
|
}
|
||||||
}
|
|
||||||
});
|
// 注册方法
|
||||||
}
|
export function register(data) {
|
||||||
|
return request({
|
||||||
// 注册方法（静态页面不实现）
|
url: '/register',
|
||||||
export function register(data) {
|
headers: {
|
||||||
return Promise.reject(new Error('静态页面不支持注册'));
|
isToken: false
|
||||||
}
|
},
|
||||||
|
method: 'post',
|
||||||
// 获取用户详细信息
|
data: data
|
||||||
export function getInfo() {
|
})
|
||||||
return Promise.resolve({
|
}
|
||||||
user: staticUser,
|
|
||||||
roles: staticUser.roles,
|
// 获取用户详细信息
|
||||||
permissions: staticUser.permissions
|
export function getInfo() {
|
||||||
});
|
return request({
|
||||||
}
|
url: '/getInfo',
|
||||||
|
method: 'get'
|
||||||
// 退出方法
|
})
|
||||||
export function logout() {
|
}
|
||||||
return Promise.resolve();
|
|
||||||
}
|
// 退出方法
|
||||||
|
export function logout() {
|
||||||
// 获取验证码（静态假数据）
|
return request({
|
||||||
export function getCodeImg() {
|
url: '/logout',
|
||||||
return Promise.resolve({
|
method: 'post'
|
||||||
img: '',
|
})
|
||||||
uuid: 'static-uuid',
|
}
|
||||||
captchaEnabled: false
|
|
||||||
});
|
// 获取验证码
|
||||||
|
export function getCodeImg() {
|
||||||
|
return request({
|
||||||
|
url: '/captchaImage',
|
||||||
|
headers: {
|
||||||
|
isToken: false
|
||||||
|
},
|
||||||
|
method: 'get',
|
||||||
|
timeout: 20000
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -1,152 +1,152 @@
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
import { ElNotification , ElMessageBox, ElMessage, ElLoading } from 'element-plus'
|
import { ElNotification , ElMessageBox, ElMessage, ElLoading } from 'element-plus'
|
||||||
import { getToken } from '@/utils/auth'
|
import { getToken } from '@/utils/auth'
|
||||||
import errorCode from '@/utils/errorCode'
|
import errorCode from '@/utils/errorCode'
|
||||||
import { tansParams, blobValidate } from '@/utils/ruoyi'
|
import { tansParams, blobValidate } from '@/utils/ruoyi'
|
||||||
import cache from '@/plugins/cache'
|
import cache from '@/plugins/cache'
|
||||||
import { saveAs } from 'file-saver'
|
import { saveAs } from 'file-saver'
|
||||||
import useUserStore from '@/store/modules/user'
|
import useUserStore from '@/store/modules/user'
|
||||||
|
|
||||||
let downloadLoadingInstance;
|
let downloadLoadingInstance;
|
||||||
// 是否显示重新登录
|
// 是否显示重新登录
|
||||||
export let isRelogin = { show: false };
|
export let isRelogin = { show: false };
|
||||||
|
|
||||||
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
|
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
|
||||||
// 创建axios实例
|
// 创建axios实例
|
||||||
const service = axios.create({
|
const service = axios.create({
|
||||||
// axios中请求配置有baseURL选项，表示请求URL公共部分
|
// axios中请求配置有baseURL选项，表示请求URL公共部分
|
||||||
baseURL: import.meta.env.VITE_APP_BASE_API,
|
baseURL: import.meta.env.VITE_APP_BASE_API,
|
||||||
// 超时
|
// 超时
|
||||||
timeout: 10000
|
timeout: 10000
|
||||||
})
|
})
|
||||||
|
|
||||||
// request拦截器
|
// request拦截器
|
||||||
service.interceptors.request.use(config => {
|
service.interceptors.request.use(config => {
|
||||||
// 是否需要设置 token
|
// 是否需要设置 token
|
||||||
const isToken = (config.headers || {}).isToken === false
|
const isToken = (config.headers || {}).isToken === false
|
||||||
// 是否需要防止数据重复提交
|
// 是否需要防止数据重复提交
|
||||||
const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
|
const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
|
||||||
if (getToken() && !isToken) {
|
if (getToken() && !isToken) {
|
||||||
config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
|
config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
|
||||||
}
|
}
|
||||||
// get请求映射params参数
|
// get请求映射params参数
|
||||||
if (config.method === 'get' && config.params) {
|
if (config.method === 'get' && config.params) {
|
||||||
let url = config.url + '?' + tansParams(config.params);
|
let url = config.url + '?' + tansParams(config.params);
|
||||||
url = url.slice(0, -1);
|
url = url.slice(0, -1);
|
||||||
config.params = {};
|
config.params = {};
|
||||||
config.url = url;
|
config.url = url;
|
||||||
}
|
}
|
||||||
if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
|
if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
|
||||||
const requestObj = {
|
const requestObj = {
|
||||||
url: config.url,
|
url: config.url,
|
||||||
data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
|
data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
|
||||||
time: new Date().getTime()
|
time: new Date().getTime()
|
||||||
}
|
}
|
||||||
const requestSize = Object.keys(JSON.stringify(requestObj)).length; // 请求数据大小
|
const requestSize = Object.keys(JSON.stringify(requestObj)).length; // 请求数据大小
|
||||||
const limitSize = 5 * 1024 * 1024; // 限制存放数据5M
|
const limitSize = 5 * 1024 * 1024; // 限制存放数据5M
|
||||||
if (requestSize >= limitSize) {
|
if (requestSize >= limitSize) {
|
||||||
console.warn(`[${config.url}]: ` + '请求数据大小超出允许的5M限制，无法进行防重复提交验证。')
|
console.warn(`[${config.url}]: ` + '请求数据大小超出允许的5M限制，无法进行防重复提交验证。')
|
||||||
return config;
|
return config;
|
||||||
}
|
}
|
||||||
const sessionObj = cache.session.getJSON('sessionObj')
|
const sessionObj = cache.session.getJSON('sessionObj')
|
||||||
if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
|
if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
|
||||||
cache.session.setJSON('sessionObj', requestObj)
|
cache.session.setJSON('sessionObj', requestObj)
|
||||||
} else {
|
} else {
|
||||||
const s_url = sessionObj.url; // 请求地址
|
const s_url = sessionObj.url; // 请求地址
|
||||||
const s_data = sessionObj.data; // 请求数据
|
const s_data = sessionObj.data; // 请求数据
|
||||||
const s_time = sessionObj.time; // 请求时间
|
const s_time = sessionObj.time; // 请求时间
|
||||||
const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交
|
const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交
|
||||||
if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
|
if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
|
||||||
const message = '数据正在处理，请勿重复提交';
|
const message = '数据正在处理，请勿重复提交';
|
||||||
console.warn(`[${s_url}]: ` + message)
|
console.warn(`[${s_url}]: ` + message)
|
||||||
return Promise.reject(new Error(message))
|
return Promise.reject(new Error(message))
|
||||||
} else {
|
} else {
|
||||||
cache.session.setJSON('sessionObj', requestObj)
|
cache.session.setJSON('sessionObj', requestObj)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return config
|
return config
|
||||||
}, error => {
|
}, error => {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
Promise.reject(error)
|
Promise.reject(error)
|
||||||
})
|
})
|
||||||
|
|
||||||
// 响应拦截器
|
// 响应拦截器
|
||||||
service.interceptors.response.use(res => {
|
service.interceptors.response.use(res => {
|
||||||
// 未设置状态码则默认成功状态
|
// 未设置状态码则默认成功状态
|
||||||
const code = res.data.code || 200;
|
const code = res.data.code || 200;
|
||||||
// 获取错误信息
|
// 获取错误信息
|
||||||
const msg = errorCode[code] || res.data.msg || errorCode['default']
|
const msg = errorCode[code] || res.data.msg || errorCode['default']
|
||||||
// 二进制数据则直接返回
|
// 二进制数据则直接返回
|
||||||
if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
|
if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
|
||||||
return res.data
|
return res.data
|
||||||
}
|
}
|
||||||
if (code === 401) {
|
if (code === 401) {
|
||||||
if (!isRelogin.show) {
|
if (!isRelogin.show) {
|
||||||
isRelogin.show = true;
|
isRelogin.show = true;
|
||||||
ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
|
ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
|
||||||
isRelogin.show = false;
|
isRelogin.show = false;
|
||||||
useUserStore().logOut().then(() => {
|
useUserStore().logOut().then(() => {
|
||||||
location.href = '/index';
|
location.href = '/index';
|
||||||
})
|
})
|
||||||
}).catch(() => {
|
}).catch(() => {
|
||||||
isRelogin.show = false;
|
isRelogin.show = false;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
|
return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
|
||||||
} else if (code === 500) {
|
} else if (code === 500) {
|
||||||
ElMessage({ message: msg, type: 'error' })
|
ElMessage({ message: msg, type: 'error' })
|
||||||
return Promise.reject(new Error(msg))
|
return Promise.reject(new Error(msg))
|
||||||
} else if (code === 601) {
|
} else if (code === 601) {
|
||||||
ElMessage({ message: msg, type: 'warning' })
|
ElMessage({ message: msg, type: 'warning' })
|
||||||
return Promise.reject(new Error(msg))
|
return Promise.reject(new Error(msg))
|
||||||
} else if (code !== 200) {
|
} else if (code !== 200) {
|
||||||
ElNotification.error({ title: msg })
|
ElNotification.error({ title: msg })
|
||||||
return Promise.reject('error')
|
return Promise.reject('error')
|
||||||
} else {
|
} else {
|
||||||
return Promise.resolve(res.data)
|
return Promise.resolve(res.data)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
error => {
|
error => {
|
||||||
console.log('err' + error)
|
console.log('err' + error)
|
||||||
let { message } = error;
|
let { message } = error;
|
||||||
if (message == "Network Error") {
|
if (message == "Network Error") {
|
||||||
message = "后端接口连接异常";
|
message = "后端接口连接异常";
|
||||||
} else if (message.includes("timeout")) {
|
} else if (message.includes("timeout")) {
|
||||||
message = "系统接口请求超时";
|
message = "系统接口请求超时";
|
||||||
} else if (message.includes("Request failed with status code")) {
|
} else if (message.includes("Request failed with status code")) {
|
||||||
message = "系统接口" + message.substr(message.length - 3) + "异常";
|
message = "系统接口" + message.substr(message.length - 3) + "异常";
|
||||||
}
|
}
|
||||||
ElMessage({ message: message, type: 'error', duration: 5 * 1000 })
|
ElMessage({ message: message, type: 'error', duration: 5 * 1000 })
|
||||||
return Promise.reject(error)
|
return Promise.reject(error)
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
// 通用下载方法
|
// 通用下载方法
|
||||||
export function download(url, params, filename, config) {
|
export function download(url, params, filename, config) {
|
||||||
downloadLoadingInstance = ElLoading.service({ text: "正在下载数据，请稍候", background: "rgba(0, 0, 0, 0.7)", })
|
downloadLoadingInstance = ElLoading.service({ text: "正在下载数据，请稍候", background: "rgba(0, 0, 0, 0.7)", })
|
||||||
return service.post(url, params, {
|
return service.post(url, params, {
|
||||||
transformRequest: [(params) => { return tansParams(params) }],
|
transformRequest: [(params) => { return tansParams(params) }],
|
||||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||||
responseType: 'blob',
|
responseType: 'blob',
|
||||||
...config
|
...config
|
||||||
}).then(async (data) => {
|
}).then(async (data) => {
|
||||||
const isBlob = blobValidate(data);
|
const isBlob = blobValidate(data);
|
||||||
if (isBlob) {
|
if (isBlob) {
|
||||||
const blob = new Blob([data])
|
const blob = new Blob([data])
|
||||||
saveAs(blob, filename)
|
saveAs(blob, filename)
|
||||||
} else {
|
} else {
|
||||||
const resText = await data.text();
|
const resText = await data.text();
|
||||||
const rspObj = JSON.parse(resText);
|
const rspObj = JSON.parse(resText);
|
||||||
const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
|
const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
|
||||||
ElMessage.error(errMsg);
|
ElMessage.error(errMsg);
|
||||||
}
|
}
|
||||||
downloadLoadingInstance.close();
|
downloadLoadingInstance.close();
|
||||||
}).catch((r) => {
|
}).catch((r) => {
|
||||||
console.error(r)
|
console.error(r)
|
||||||
ElMessage.error('下载文件出现错误，请联系管理员！')
|
ElMessage.error('下载文件出现错误，请联系管理员！')
|
||||||
downloadLoadingInstance.close();
|
downloadLoadingInstance.close();
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export default service
|
export default service
|
||||||
|
|
|
||||||
|
|
@ -1,228 +1,234 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="login">
|
<div class="login">
|
||||||
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
|
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
|
||||||
<h3 class="title">{{ title }}</h3>
|
<h3 class="title">{{ title }}</h3>
|
||||||
<el-form-item prop="username">
|
<el-form-item prop="username">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="loginForm.username"
|
v-model="loginForm.username"
|
||||||
type="text"
|
type="text"
|
||||||
size="large"
|
size="large"
|
||||||
auto-complete="off"
|
auto-complete="off"
|
||||||
placeholder="账号"
|
placeholder="账号"
|
||||||
>
|
>
|
||||||
<template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
|
<template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item prop="password">
|
<el-form-item prop="password">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="loginForm.password"
|
v-model="loginForm.password"
|
||||||
type="password"
|
type="password"
|
||||||
size="large"
|
size="large"
|
||||||
auto-complete="off"
|
auto-complete="off"
|
||||||
placeholder="密码"
|
placeholder="密码"
|
||||||
@keyup.enter="handleLogin"
|
@keyup.enter="handleLogin"
|
||||||
>
|
>
|
||||||
<template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
|
<template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item prop="code" v-if="captchaEnabled">
|
<el-form-item prop="code" v-if="captchaEnabled">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="loginForm.code"
|
v-model="loginForm.code"
|
||||||
size="large"
|
size="large"
|
||||||
auto-complete="off"
|
auto-complete="off"
|
||||||
placeholder="验证码"
|
placeholder="验证码"
|
||||||
style="width: 63%"
|
style="width: 63%"
|
||||||
@keyup.enter="handleLogin"
|
@keyup.enter="handleLogin"
|
||||||
>
|
>
|
||||||
<template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
|
<template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
|
||||||
</el-input>
|
</el-input>
|
||||||
<div class="login-code">
|
<div class="login-code">
|
||||||
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
|
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
|
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
|
||||||
<el-form-item style="width:100%;">
|
<el-form-item style="width:100%;">
|
||||||
<el-button
|
<el-button
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
size="large"
|
size="large"
|
||||||
type="primary"
|
type="primary"
|
||||||
style="width:100%;"
|
style="width:100%;"
|
||||||
@click.prevent="handleLogin"
|
@click.prevent="handleLogin"
|
||||||
>
|
>
|
||||||
<span v-if="!loading">登 录</span>
|
<span v-if="!loading">登 录</span>
|
||||||
<span v-else>登 录 中...</span>
|
<span v-else>登 录 中...</span>
|
||||||
</el-button>
|
</el-button>
|
||||||
<div style="float: right;" v-if="register">
|
<div style="float: right;" v-if="register">
|
||||||
<router-link class="link-type" :to="'/register'">立即注册</router-link>
|
<router-link class="link-type" :to="'/register'">立即注册</router-link>
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<!-- 底部 -->
|
<!-- 底部 -->
|
||||||
<div class="el-login-footer">
|
<div class="el-login-footer">
|
||||||
<span>Copyright © 2018-2025 guoan All Rights Reserved.</span>
|
<span>Copyright © 2018-2025 guoan All Rights Reserved.</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { getCodeImg } from "@/api/login";
|
import { getCodeImg } from "@/api/login";
|
||||||
import Cookies from "js-cookie";
|
import Cookies from "js-cookie";
|
||||||
import { encrypt, decrypt } from "@/utils/jsencrypt";
|
import { encrypt, decrypt } from "@/utils/jsencrypt";
|
||||||
import useUserStore from '@/store/modules/user'
|
import useUserStore from '@/store/modules/user'
|
||||||
|
|
||||||
const title = import.meta.env.VITE_APP_TITLE;
|
const title = import.meta.env.VITE_APP_TITLE;
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { proxy } = getCurrentInstance();
|
const { proxy } = getCurrentInstance();
|
||||||
|
|
||||||
const loginForm = ref({
|
const loginForm = ref({
|
||||||
username: "admin",
|
username: "admin",
|
||||||
password: "admin123",
|
password: "admin123",
|
||||||
rememberMe: false,
|
rememberMe: false,
|
||||||
code: "",
|
code: "",
|
||||||
uuid: ""
|
uuid: ""
|
||||||
});
|
});
|
||||||
|
|
||||||
const loginRules = {
|
const codeUrl = ref("");
|
||||||
username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
|
const loading = ref(false);
|
||||||
password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
|
// 验证码开关
|
||||||
code: [{ required: true, trigger: "change", message: "请输入验证码" }]
|
const captchaEnabled = ref(true);
|
||||||
};
|
// 注册开关
|
||||||
|
const register = ref(false);
|
||||||
const codeUrl = ref("");
|
const redirect = ref(undefined);
|
||||||
const loading = ref(false);
|
|
||||||
// 验证码开关
|
// 动态验证规则
|
||||||
const captchaEnabled = ref(true);
|
const loginRules = computed(() => {
|
||||||
// 注册开关
|
const rules = {
|
||||||
const register = ref(false);
|
username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
|
||||||
const redirect = ref(undefined);
|
password: [{ required: true, trigger: "blur", message: "请输入您的密码" }]
|
||||||
|
};
|
||||||
watch(route, (newRoute) => {
|
if (captchaEnabled.value) {
|
||||||
redirect.value = newRoute.query && newRoute.query.redirect;
|
rules.code = [{ required: true, trigger: "change", message: "请输入验证码" }];
|
||||||
}, { immediate: true });
|
}
|
||||||
|
return rules;
|
||||||
function handleLogin() {
|
});
|
||||||
proxy.$refs.loginRef.validate(valid => {
|
|
||||||
if (valid) {
|
watch(route, (newRoute) => {
|
||||||
loading.value = true;
|
redirect.value = newRoute.query && newRoute.query.redirect;
|
||||||
// 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
|
}, { immediate: true });
|
||||||
if (loginForm.value.rememberMe) {
|
|
||||||
Cookies.set("username", loginForm.value.username, { expires: 30 });
|
function handleLogin() {
|
||||||
Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 });
|
proxy.$refs.loginRef.validate(valid => {
|
||||||
Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
|
if (valid) {
|
||||||
} else {
|
loading.value = true;
|
||||||
// 否则移除
|
// 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
|
||||||
Cookies.remove("username");
|
if (loginForm.value.rememberMe) {
|
||||||
Cookies.remove("password");
|
Cookies.set("username", loginForm.value.username, { expires: 30 });
|
||||||
Cookies.remove("rememberMe");
|
Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 });
|
||||||
}
|
Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
|
||||||
// 调用action的登录方法
|
} else {
|
||||||
userStore.login(loginForm.value).then(() => {
|
// 否则移除
|
||||||
const query = route.query;
|
Cookies.remove("username");
|
||||||
const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
|
Cookies.remove("password");
|
||||||
if (cur !== "redirect") {
|
Cookies.remove("rememberMe");
|
||||||
acc[cur] = query[cur];
|
}
|
||||||
}
|
// 调用action的登录方法
|
||||||
return acc;
|
userStore.login(loginForm.value).then(() => {
|
||||||
}, {});
|
const query = route.query;
|
||||||
router.push({ path: redirect.value || "/", query: otherQueryParams });
|
const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
|
||||||
}).catch(() => {
|
if (cur !== "redirect") {
|
||||||
loading.value = false;
|
acc[cur] = query[cur];
|
||||||
// 重新获取验证码
|
}
|
||||||
if (captchaEnabled.value) {
|
return acc;
|
||||||
getCode();
|
}, {});
|
||||||
}
|
router.push({ path: redirect.value || "/", query: otherQueryParams });
|
||||||
});
|
}).catch(() => {
|
||||||
}
|
loading.value = false;
|
||||||
});
|
// 重新获取验证码
|
||||||
}
|
if (captchaEnabled.value) {
|
||||||
|
getCode();
|
||||||
function getCode() {
|
}
|
||||||
getCodeImg().then(res => {
|
});
|
||||||
captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
|
}
|
||||||
if (captchaEnabled.value) {
|
});
|
||||||
codeUrl.value = "data:image/gif;base64," + res.img;
|
}
|
||||||
loginForm.value.uuid = res.uuid;
|
|
||||||
}
|
function getCode() {
|
||||||
});
|
getCodeImg().then(res => {
|
||||||
}
|
captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
|
||||||
|
if (captchaEnabled.value) {
|
||||||
function getCookie() {
|
codeUrl.value = "data:image/gif;base64," + res.img;
|
||||||
const username = Cookies.get("username");
|
loginForm.value.uuid = res.uuid;
|
||||||
const password = Cookies.get("password");
|
}
|
||||||
const rememberMe = Cookies.get("rememberMe");
|
});
|
||||||
loginForm.value = {
|
}
|
||||||
username: username === undefined ? loginForm.value.username : username,
|
|
||||||
password: password === undefined ? loginForm.value.password : decrypt(password),
|
function getCookie() {
|
||||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
|
const username = Cookies.get("username");
|
||||||
};
|
const password = Cookies.get("password");
|
||||||
}
|
const rememberMe = Cookies.get("rememberMe");
|
||||||
|
loginForm.value = {
|
||||||
getCode();
|
username: username === undefined ? loginForm.value.username : username,
|
||||||
getCookie();
|
password: password === undefined ? loginForm.value.password : decrypt(password),
|
||||||
</script>
|
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
|
||||||
|
};
|
||||||
<style lang='scss' scoped>
|
}
|
||||||
.login {
|
|
||||||
display: flex;
|
getCode();
|
||||||
justify-content: center;
|
getCookie();
|
||||||
align-items: center;
|
</script>
|
||||||
height: 100%;
|
|
||||||
background-image: url("../assets/images/login-background.jpg");
|
<style lang='scss' scoped>
|
||||||
background-size: cover;
|
.login {
|
||||||
}
|
display: flex;
|
||||||
.title {
|
justify-content: center;
|
||||||
margin: 0px auto 30px auto;
|
align-items: center;
|
||||||
text-align: center;
|
height: 100%;
|
||||||
color: #707070;
|
background-image: url("../assets/images/login-background.jpg");
|
||||||
}
|
background-size: cover;
|
||||||
|
}
|
||||||
.login-form {
|
.title {
|
||||||
border-radius: 6px;
|
margin: 0px auto 30px auto;
|
||||||
background: #ffffff;
|
text-align: center;
|
||||||
width: 400px;
|
color: #707070;
|
||||||
padding: 25px 25px 5px 25px;
|
}
|
||||||
.el-input {
|
|
||||||
height: 40px;
|
.login-form {
|
||||||
input {
|
border-radius: 6px;
|
||||||
height: 40px;
|
background: #ffffff;
|
||||||
}
|
width: 400px;
|
||||||
}
|
padding: 25px 25px 5px 25px;
|
||||||
.input-icon {
|
.el-input {
|
||||||
height: 39px;
|
height: 40px;
|
||||||
width: 14px;
|
input {
|
||||||
margin-left: 0px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.login-tip {
|
.input-icon {
|
||||||
font-size: 13px;
|
height: 39px;
|
||||||
text-align: center;
|
width: 14px;
|
||||||
color: #bfbfbf;
|
margin-left: 0px;
|
||||||
}
|
}
|
||||||
.login-code {
|
}
|
||||||
width: 33%;
|
.login-tip {
|
||||||
height: 40px;
|
font-size: 13px;
|
||||||
float: right;
|
text-align: center;
|
||||||
img {
|
color: #bfbfbf;
|
||||||
cursor: pointer;
|
}
|
||||||
vertical-align: middle;
|
.login-code {
|
||||||
}
|
width: 33%;
|
||||||
}
|
height: 40px;
|
||||||
.el-login-footer {
|
float: right;
|
||||||
height: 40px;
|
img {
|
||||||
line-height: 40px;
|
cursor: pointer;
|
||||||
position: fixed;
|
vertical-align: middle;
|
||||||
bottom: 0;
|
}
|
||||||
width: 100%;
|
}
|
||||||
text-align: center;
|
.el-login-footer {
|
||||||
color: #fff;
|
height: 40px;
|
||||||
font-family: Arial;
|
line-height: 40px;
|
||||||
font-size: 12px;
|
position: fixed;
|
||||||
letter-spacing: 1px;
|
bottom: 0;
|
||||||
}
|
width: 100%;
|
||||||
.login-code-img {
|
text-align: center;
|
||||||
height: 40px;
|
color: #fff;
|
||||||
padding-left: 12px;
|
font-family: Arial;
|
||||||
}
|
font-size: 12px;
|
||||||
</style>
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
.login-code-img {
|
||||||
|
height: 40px;
|
||||||
|
padding-left: 12px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue