herenshan112
/
ShutongInterconnectedChemicalCloudPlatform
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改登录页面验证码框

qin_24
herenshan112 4 months ago
parent
4612f1d252
commit
e64ebeda48
3 changed files with 100 additions and 102 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/permission.ts
  2. 10
      src/store/modules/permission.ts
  3. 189
      src/views/login/index.vue

3
src/permission.ts
View File

@ -44,8 +44,9 @@ router.beforeEach(async (to:any, from:any, next:any) => {
// const { roles } = await userStore.getInfo(); // const { roles } = await userStore.getInfo();
const { perms } = await userStore.getInfo(); const { perms } = await userStore.getInfo();
const accessRoutes = await permissionStore.generateRoutes(perms); const accessRoutes = await permissionStore.generateRoutes(perms);
// console.log("路由权限--perms--》",accessRoutes); console.log("路由权限--perms--》",accessRoutes);
accessRoutes.forEach((route:any) => { accessRoutes.forEach((route:any) => {
console.log("路由权限--addRoutecessRoutes",route);
router.addRoute(route); router.addRoute(route);
}); });
next({ ...to, replace: true }); next({ ...to, replace: true });

10
src/store/modules/permission.ts
View File

@ -103,8 +103,13 @@ export const usePermissionStore = defineStore("permission", () => {
listRoutes() listRoutes()
.then(({ data: asyncRoutes }) => { .then(({ data: asyncRoutes }) => {
// 根据角色获取有访问权限的路由 // 根据角色获取有访问权限的路由
// console.log("获取到的路由---->",asyncRoutes, roles); console.log("获取到的路由---->",asyncRoutes);
const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles); const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles);
console.log("获取到的路由--1-->",accessedRoutes);
console.log("获取到的路由--2-->",roles);
setRoutes(accessedRoutes); setRoutes(accessedRoutes);
resolve(accessedRoutes); resolve(accessedRoutes);
}) })
@ -113,6 +118,9 @@ export const usePermissionStore = defineStore("permission", () => {
}); });
}); });
} }
console.log("获取到的路由--3->",routes)
console.log("获取到的路由--4->",setRoutes)
console.log("获取到的路由--5->",generateRoutes)
return { routes, setRoutes, generateRoutes }; return { routes, setRoutes, generateRoutes };
}); });

189
src/views/login/index.vue
View File

@ -2,97 +2,90 @@
<div class="login-container"> <div class="login-container">
<div class="login-main"> <div class="login-main">
<div class="login-form"> <div class="login-form">
<el-form <el-form ref="loginFormRef" :model="loginData" :rules="loginRules">
ref="loginFormRef" <!-- <div class="flex text-white items-center py-4">
:model="loginData"
:rules="loginRules"
>
<!-- <div class="flex text-white items-center py-4">
<span class="text-2xl flex-1 text-center">{{ $t("login.title") }}</span> <span class="text-2xl flex-1 text-center">{{ $t("login.title") }}</span>
<lang-select style="color: #fff" /> <lang-select style="color: #fff" />
</div> --> </div> -->
<div class="login-title"> <div class="login-title">用户登录</div>
用户登录 <el-form-item prop="username">
</div> <div class="p-2">
<el-form-item prop="username"> <svg-icon icon-class="user" />
<div class="p-2"> </div>
<svg-icon icon-class="user" /> <el-input
</div> ref="username"
<el-input v-model="loginData.username"
ref="username" class="flex-1"
v-model="loginData.username" size="large"
class="flex-1" :placeholder="$t('login.username')"
size="large" name="username"
:placeholder="$t('login.username')"
name="username"
/>
</el-form-item>
<el-tooltip
:disabled="isCapslock === false"
content="Caps lock is On"
placement="right"
>
<el-form-item prop="password">
<span class="p-2">
<svg-icon icon-class="password" />
</span>
<el-input
v-model="loginData.password"
class="flex-1"
placeholder="密码"
:type="passwordVisible === false ? 'password' : 'input'"
size="large"
name="password"
@keyup="checkCapslock"
@keyup.enter="handleLogin"
/>
<span class="mr-2" @click="passwordVisible = !passwordVisible">
<svg-icon
:icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
class="text-white cursor-pointer"
/> />
</span> </el-form-item>
</el-form-item>
</el-tooltip>
<!-- 验证码 --> <el-tooltip
<el-form-item prop="captcha"> :disabled="isCapslock === false"
<span class="p-2"> content="Caps lock is On"
<svg-icon icon-class="verify_code" /> placement="right"
</span> >
<el-input <el-form-item prop="password">
v-model="loginData.captcha" <span class="p-2">
auto-complete="off" <svg-icon icon-class="password" />
:placeholder="$t('login.verifyCode')" </span>
class="w-[60%]" <el-input
@keyup.enter="handleLogin" v-model="loginData.password"
/> class="flex-1"
placeholder="密码"
:type="passwordVisible === false ? 'password' : 'input'"
size="large"
name="password"
@keyup="checkCapslock"
@keyup.enter="handleLogin"
/>
<span class="mr-2" @click="passwordVisible = !passwordVisible">
<svg-icon
:icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
class="text-white cursor-pointer"
/>
</span>
</el-form-item>
</el-tooltip>
<div class="captcha"> <!-- 验证码 -->
<img :src="captchaBase64" @click="getCaptcha" /> <el-form-item prop="captcha">
</div> <span class="p-2">
</el-form-item> <svg-icon icon-class="verify_code" />
</span>
<el-input
v-model="loginData.captcha"
auto-complete="off"
:placeholder="$t('login.verifyCode')"
class="w-[60%]"
style="width: 60%"
@keyup.enter="handleLogin"
/>
<el-button <div class="captcha">
size="default" <img :src="captchaBase64" @click="getCaptcha" />
:loading="loading" </div>
type="primary" </el-form-item>
class="w-full"
@click.prevent="handleLogin"
>{{ $t("login.login") }}
</el-button>
<!-- 账号密码提示 --> <el-button
<div class="mt-4 text-sm" style="color:#333"> size="default"
<span>{{ $t("login.username") }}: ceshi</span> :loading="loading"
<span class="ml-4"> {{ $t("login.password") }}: 123456</span> type="primary"
</div> class="w-full"
</el-form> @click.prevent="handleLogin"
>{{ $t("login.login") }}
</el-button>
<!-- 账号密码提示 -->
<div class="mt-4 text-sm" style="color: #333">
<span>{{ $t("login.username") }}: ceshi</span>
<span class="ml-4"> {{ $t("login.password") }}: 123456</span>
</div>
</el-form>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
@ -190,18 +183,15 @@ function handleLogin() {
const redirect = (query.redirect as LocationQueryValue) ?? "/"; const redirect = (query.redirect as LocationQueryValue) ?? "/";
const otherQueryParams = Object.keys(query).reduce( const otherQueryParams = Object.keys(query).reduce((acc: any, cur: string) => {
(acc: any, cur: string) => { if (cur !== "redirect") {
if (cur !== "redirect") { acc[cur] = query[cur];
acc[cur] = query[cur]; }
} return acc;
return acc; }, {});
}, //console.log("登陆输出：",redirect,otherQueryParams);
{}
);
//console.log("登陆输出：",redirect,otherQueryParams);
router.push({ path: redirect, query: otherQueryParams }); router.push({ path: redirect, query: otherQueryParams });
getCaptcha(); getCaptcha();
}) })
.catch(() => { .catch(() => {
// 验证失败，重新生成验证码 // 验证失败，重新生成验证码
@ -227,11 +217,11 @@ onMounted(() => {
background-image: url(../../assets/login/bg.png); background-image: url(../../assets/login/bg.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
background-color: #ECEFF5; background-color: #eceff5;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.login-main{ .login-main {
width: 800px; width: 800px;
height: 700px; height: 700px;
position: relative; position: relative;
@ -239,11 +229,11 @@ onMounted(() => {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
margin-left: -18%; margin-left: -18%;
.login-title{ .login-title {
font-weight: bold; font-weight: bold;
font-size: 37px; font-size: 37px;
text-align: center; text-align: center;
color: #1E5EFF; color: #1e5eff;
line-height: 43px; line-height: 43px;
margin-bottom: 30px; margin-bottom: 30px;
} }
@ -252,12 +242,12 @@ onMounted(() => {
width: 500px; width: 500px;
background-color: #fff; background-color: #fff;
border-radius: 6px; border-radius: 6px;
box-shadow: 0px 0px 42px -28px #37508E; box-shadow: 0px 0px 42px -28px #37508e;
padding: 60px 30px; padding: 60px 30px;
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
margin-left: 60%; margin-left: 60%;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
@ -278,12 +268,11 @@ onMounted(() => {
.el-form-item { .el-form-item {
border-radius: 5px; border-radius: 5px;
border: solid 1px #D9D9D9; border: solid 1px #d9d9d9;
color: #666; color: #666;
} }
.el-input { .el-input {
// 子组件 scoped 无效，使用 :deep // 子组件 scoped 无效，使用 :deep
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
padding: 0; padding: 0;

Write Preview
Loading…
Cancel
Save