cxc/qiaoba-vue3
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add tenant to login request header

Browse Source
This commit is contained in:
ailanyin
2023-05-11 16:21:12 +08:00
parent 96d831192d
commit 685f1527e5
3 changed files with 252 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/api/login.js
View File

@ -1,67 +1,68 @@
import request from '@/utils/request' import request from '@/utils/request'
// 登录方法 // 登录方法
export function login(username, password, code, uuid) { export function login(username, password, code, uuid, tenant) {
const data = { const data = {
username, username,
password, password,
code, code,
uuid uuid
} }
return request({ return request({
url: '/login', url: '/login',
headers: { headers: {
isToken: false isToken: false,
}, tenant
method: 'post', },
data: data method: 'post',
}) data: data
})
} }
// 注册方法 // 注册方法
export function register(data) { export function register(data) {
return request({ return request({
url: '/register', url: '/register',
headers: { headers: {
isToken: false isToken: false
}, },
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 获取用户详细信息 // 获取用户详细信息
export function getInfo() { export function getInfo() {
return request({ return request({
url: '/getInfo', url: '/getInfo',
method: 'get' method: 'get'
}) })
} }
// 退出方法 // 退出方法
export function logout() { export function logout() {
return request({ return request({
url: '/logout', url: '/logout',
method: 'post' method: 'post'
}) })
} }
// 获取验证码 // 获取验证码
export function getCodeImg() { export function getCodeImg() {
return request({ return request({
url: '/captchaImage', url: '/captchaImage',
headers: { headers: {
isToken: false isToken: false
}, },
method: 'get', method: 'get',
timeout: 20000 timeout: 20000
}) })
} }
// 获取路由 // 获取路由
export const getRouters = () => { export const getRouters = () => {
return request({ return request({
url: '/getRouters', url: '/getRouters',
method: 'get' method: 'get'
}) })
} }

127
src/store/modules/user.js
View File

@ -1,70 +1,71 @@
import { login, logout, getInfo } from '@/api/login' import {getInfo, login, logout} from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth' import {getToken, removeToken, setToken} from '@/utils/auth'
import defAva from '@/assets/images/profile.jpg' import defAva from '@/assets/images/profile.jpg'
const useUserStore = defineStore( const useUserStore = defineStore(
'user', 'user',
{ {
state: () => ({ state: () => ({
token: getToken(), token: getToken(),
name: '', name: '',
avatar: '', avatar: '',
roles: [], roles: [],
permissions: [] permissions: []
}), }),
actions: { actions: {
// 登录 // 登录
login(userInfo) { login(userInfo) {
const username = userInfo.username.trim() const username = userInfo.username.trim()
const password = userInfo.password const password = userInfo.password
const code = userInfo.code const tenant = userInfo.tenant
const uuid = userInfo.uuid const code = userInfo.code
return new Promise((resolve, reject) => { const uuid = userInfo.uuid
login(username, password, code, uuid).then(res => { return new Promise((resolve, reject) => {
setToken(res.token) login(username, password, code, uuid, tenant).then(res => {
this.token = res.token setToken(res.token)
resolve() this.token = res.token
}).catch(error => { resolve()
reject(error) }).catch(error => {
}) reject(error)
}) })
}, })
// 获取用户信息 },
getInfo() { // 获取用户信息
return new Promise((resolve, reject) => { getInfo() {
getInfo().then(res => { return new Promise((resolve, reject) => {
const user = res.user getInfo().then(res => {
const avatar = (user.avatar == "" || user.avatar == null) ? defAva : import.meta.env.VITE_APP_BASE_API + user.avatar; const user = res.user
const avatar = (user.avatar == "" || user.avatar == null) ? defAva : import.meta.env.VITE_APP_BASE_API + user.avatar;
if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组 if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
this.roles = res.roles this.roles = res.roles
this.permissions = res.permissions this.permissions = res.permissions
} else { } else {
this.roles = ['ROLE_DEFAULT'] this.roles = ['ROLE_DEFAULT']
}
this.name = user.userName
this.avatar = avatar;
resolve(res)
}).catch(error => {
reject(error)
})
})
},
// 退出系统
logOut() {
return new Promise((resolve, reject) => {
logout(this.token).then(() => {
this.token = ''
this.roles = []
this.permissions = []
removeToken()
resolve()
}).catch(error => {
reject(error)
})
})
} }
this.name = user.userName }
this.avatar = avatar; })
resolve(res)
}).catch(error => {
reject(error)
})
})
},
// 退出系统
logOut() {
return new Promise((resolve, reject) => {
logout(this.token).then(() => {
this.token = ''
this.roles = []
this.permissions = []
removeToken()
resolve()
}).catch(error => {
reject(error)
})
})
}
}
})
export default useUserStore export default useUserStore

256
src/views/login.vue
View File

@ -1,91 +1,112 @@
<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">若依后台管理系统</h3> <h3 class="title">若依后台管理系统</h3>
<el-form-item prop="username"> <el-form-item prop="tenant">
<el-input <el-input
v-model="loginForm.username" v-model="loginForm.tenant"
type="text" auto-complete="off"
size="large" placeholder="租户"
auto-complete="off" size="large"
placeholder="账号" type="text"
> >
<template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template> <template #prefix>
</el-input> <svg-icon class="el-input__icon input-icon" icon-class="user"/>
</el-form-item> </template>
<el-form-item prop="password"> </el-input>
<el-input </el-form-item>
v-model="loginForm.password" <el-form-item prop="username">
type="password" <el-input
size="large" v-model="loginForm.username"
auto-complete="off" auto-complete="off"
placeholder="密码" placeholder="账号"
@keyup.enter="handleLogin" size="large"
> type="text"
<template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template> >
</el-input> <template #prefix>
</el-form-item> <svg-icon class="el-input__icon input-icon" icon-class="user"/>
<el-form-item prop="code" v-if="captchaEnabled"> </template>
<el-input </el-input>
v-model="loginForm.code" </el-form-item>
size="large" <el-form-item prop="password">
auto-complete="off" <el-input
placeholder="验证码" v-model="loginForm.password"
style="width: 63%" auto-complete="off"
@keyup.enter="handleLogin" placeholder="密码"
> size="large"
<template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template> type="password"
</el-input> @keyup.enter="handleLogin"
<div class="login-code"> >
<img :src="codeUrl" @click="getCode" class="login-code-img"/> <template #prefix>
<svg-icon class="el-input__icon input-icon" icon-class="password"/>
</template>
</el-input>
</el-form-item>
<el-form-item v-if="captchaEnabled" prop="code">
<el-input
v-model="loginForm.code"
auto-complete="off"
placeholder="验证码"
size="large"
style="width: 63%"
@keyup.enter="handleLogin"
>
<template #prefix>
<svg-icon class="el-input__icon input-icon" icon-class="validCode"/>
</template>
</el-input>
<div class="login-code">
<img :src="codeUrl" class="login-code-img" @click="getCode"/>
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button
:loading="loading"
size="large"
style="width:100%;"
type="primary"
@click.prevent="handleLogin"
>
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
<div v-if="register" style="float: right;">
<router-link :to="'/register'" class="link-type">立即注册</router-link>
</div>
</el-form-item>
</el-form>
<!-- 底部 -->
<div class="el-login-footer">
<span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>
</div> </div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button
:loading="loading"
size="large"
type="primary"
style="width:100%;"
@click.prevent="handleLogin"
>
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
<div style="float: right;" v-if="register">
<router-link class="link-type" :to="'/register'">立即注册</router-link>
</div>
</el-form-item>
</el-form>
<!-- 底部 -->
<div class="el-login-footer">
<span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>
</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 {decrypt, encrypt} from "@/utils/jsencrypt";
import useUserStore from '@/store/modules/user' import useUserStore from '@/store/modules/user'
const userStore = useUserStore() const userStore = useUserStore()
const router = useRouter(); const router = useRouter();
const { proxy } = getCurrentInstance(); const {proxy} = getCurrentInstance();
const loginForm = ref({ const loginForm = ref({
username: "admin", tenant: "",
password: "admin123", username: "admin",
rememberMe: false, password: "admin123",
code: "", rememberMe: false,
uuid: "" code: "",
uuid: ""
}); });
const loginRules = { const loginRules = {
username: [{ required: true, trigger: "blur", message: "请输入您的账号" }], tenant: [{required: true, trigger: "blur", message: "请输入租户"}],
password: [{ required: true, trigger: "blur", message: "请输入您的密码" }], username: [{required: true, trigger: "blur", message: "请输入您的账号"}],
code: [{ required: true, trigger: "change", message: "请输入验证码" }] password: [{required: true, trigger: "blur", message: "请输入您的密码"}],
code: [{required: true, trigger: "change", message: "请输入验证码"}]
}; };
const codeUrl = ref(""); const codeUrl = ref("");
@ -97,53 +118,55 @@ const register = ref(false);
const redirect = ref(undefined); const redirect = ref(undefined);
function handleLogin() { function handleLogin() {
proxy.$refs.loginRef.validate(valid => { proxy.$refs.loginRef.validate(valid => {
if (valid) { if (valid) {
loading.value = true; loading.value = true;
// 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码 // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
if (loginForm.value.rememberMe) { if (loginForm.value.rememberMe) {
Cookies.set("username", loginForm.value.username, { expires: 30 }); Cookies.set("tenant", loginForm.value.tenant, {expires: 30});
Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 }); Cookies.set("username", loginForm.value.username, {expires: 30});
Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 }); Cookies.set("password", encrypt(loginForm.value.password), {expires: 30});
} else { Cookies.set("rememberMe", loginForm.value.rememberMe, {expires: 30});
// 否则移除 } else {
Cookies.remove("username"); // 否则移除
Cookies.remove("password"); Cookies.remove("tenant");
Cookies.remove("rememberMe"); Cookies.remove("username");
} Cookies.remove("password");
// 调用action的登录方法 Cookies.remove("rememberMe");
userStore.login(loginForm.value).then(() => { }
router.push({ path: redirect.value || "/" }); // 调用action的登录方法
}).catch(() => { userStore.login(loginForm.value).then(() => {
loading.value = false; router.push({path: redirect.value || "/"});
// 重新获取验证码 }).catch(() => {
if (captchaEnabled.value) { loading.value = false;
getCode(); // 重新获取验证码
if (captchaEnabled.value) {
getCode();
}
});
} }
}); });
}
});
} }
function getCode() { function getCode() {
getCodeImg().then(res => { getCodeImg().then(res => {
captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled; captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
if (captchaEnabled.value) { if (captchaEnabled.value) {
codeUrl.value = "data:image/gif;base64," + res.img; codeUrl.value = "data:image/gif;base64," + res.img;
loginForm.value.uuid = res.uuid; loginForm.value.uuid = res.uuid;
} }
}); });
} }
function getCookie() { function getCookie() {
const username = Cookies.get("username"); const username = Cookies.get("username");
const password = Cookies.get("password"); const password = Cookies.get("password");
const rememberMe = Cookies.get("rememberMe"); const rememberMe = Cookies.get("rememberMe");
loginForm.value = { loginForm.value = {
username: username === undefined ? loginForm.value.username : username, username: username === undefined ? loginForm.value.username : username,
password: password === undefined ? loginForm.value.password : decrypt(password), password: password === undefined ? loginForm.value.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe) rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
}; };
} }
getCode(); getCode();
@ -159,6 +182,7 @@ getCookie();
background-image: url("../assets/images/login-background.jpg"); background-image: url("../assets/images/login-background.jpg");
background-size: cover; background-size: cover;
} }
.title { .title {
margin: 0px auto 30px auto; margin: 0px auto 30px auto;
text-align: center; text-align: center;
@ -170,32 +194,39 @@ getCookie();
background: #ffffff; background: #ffffff;
width: 400px; width: 400px;
padding: 25px 25px 5px 25px; padding: 25px 25px 5px 25px;
.el-input { .el-input {
height: 40px; height: 40px;
input { input {
height: 40px; height: 40px;
} }
} }
.input-icon { .input-icon {
height: 39px; height: 39px;
width: 14px; width: 14px;
margin-left: 0px; margin-left: 0px;
} }
} }
.login-tip { .login-tip {
font-size: 13px; font-size: 13px;
text-align: center; text-align: center;
color: #bfbfbf; color: #bfbfbf;
} }
.login-code { .login-code {
width: 33%; width: 33%;
height: 40px; height: 40px;
float: right; float: right;
img { img {
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
} }
} }
.el-login-footer { .el-login-footer {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
@ -208,6 +239,7 @@ getCookie();
font-size: 12px; font-size: 12px;
letter-spacing: 1px; letter-spacing: 1px;
} }
.login-code-img { .login-code-img {
height: 40px; height: 40px;
padding-left: 12px; padding-left: 12px;