From 2f96ef3f59c0084d2943a7fdac9f47f51fe30da5 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期四, 18 十一月 2021 17:35:08 +0800
Subject: [PATCH] 完善权限管理.清理无用的代码
---
src/views/login/index.vue | 471 ++++++++++++++++++++++++++++------------------------------
1 files changed, 227 insertions(+), 244 deletions(-)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index dd99764..9839af0 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,11 +1,5 @@
<template>
<div class="login-container">
- <el-alert
- title="beautiful boys and girls娆㈣繋鍔犲叆vue-admin-beautifulQQ缇わ細972435319"
- type="success"
- :closable="false"
- style="position: fixed"
- ></el-alert>
<el-row>
<el-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16">
<div style="color: transparent">鍗犱綅绗�</div>
@@ -18,8 +12,7 @@
class="login-form"
label-position="left"
>
- <div class="title">hello !</div>
- <div class="title-tips">娆㈣繋鏉ュ埌{{ title }}锛�</div>
+ <div class="title-tips">娆㈣繋浣跨敤{{ title }}锛�</div>
<el-form-item style="margin-top: 40px" prop="username">
<span class="svg-container svg-container-admin">
<vab-icon :icon="['fas', 'user']" />
@@ -64,9 +57,6 @@
>
鐧诲綍
</el-button>
- <router-link to="/register">
- <div style="margin-top: 20px">娉ㄥ唽</div>
- </router-link>
</el-form>
</el-col>
</el-row>
@@ -74,254 +64,247 @@
</template>
<script>
- import { isPassword } from '@/utils/validate'
+import { isPassword } from "@/utils/validate";
- export default {
- name: 'Login',
- directives: {
- focus: {
- inserted(el) {
- el.querySelector('input').focus()
- },
+export default {
+ name: "Login",
+ directives: {
+ focus: {
+ inserted(el) {
+ el.querySelector("input").focus();
},
},
- data() {
- const validateusername = (rule, value, callback) => {
- if ('' == value) {
- callback(new Error('鐢ㄦ埛鍚嶄笉鑳戒负绌�'))
+ },
+ data() {
+ const validateusername = (rule, value, callback) => {
+ if ("" == value) {
+ callback(new Error("鐢ㄦ埛鍚嶄笉鑳戒负绌�"));
+ } else {
+ callback();
+ }
+ };
+ const validatePassword = (rule, value, callback) => {
+ if (!isPassword(value)) {
+ callback(new Error("瀵嗙爜涓嶈兘灏戜簬5浣�"));
+ } else {
+ callback();
+ }
+ };
+ return {
+ nodeEnv: process.env.NODE_ENV,
+ title: this.$baseTitle,
+ form: {
+ username: "",
+ password: "",
+ },
+ rules: {
+ username: [
+ {
+ required: true,
+ trigger: "blur",
+ validator: validateusername,
+ },
+ ],
+ password: [
+ {
+ required: true,
+ trigger: "blur",
+ validator: validatePassword,
+ },
+ ],
+ },
+ loading: false,
+ passwordType: "password",
+ redirect: undefined,
+ };
+ },
+ watch: {
+ $route: {
+ handler(route) {
+ this.redirect = (route.query && route.query.redirect) || "/";
+ },
+ immediate: true,
+ },
+ },
+ created() {
+ document.body.style.overflow = "hidden";
+ },
+ beforeDestroy() {
+ document.body.style.overflow = "auto";
+ },
+ methods: {
+ handlePassword() {
+ this.passwordType === "password"
+ ? (this.passwordType = "")
+ : (this.passwordType = "password");
+ this.$nextTick(() => {
+ this.$refs.password.focus();
+ });
+ },
+ handleLogin() {
+ this.$refs.form.validate((valid) => {
+ if (valid) {
+ this.loading = true;
+ this.$store
+ .dispatch("user/login", this.form)
+ .then(() => {
+ const routerPath =
+ this.redirect === "/404" || this.redirect === "/401"
+ ? "/"
+ : this.redirect;
+ this.$router.push(routerPath).catch(() => {});
+ this.loading = true;
+ })
+ .catch(() => {
+ this.loading = false;
+ });
} else {
- callback()
+ return false;
}
- }
- const validatePassword = (rule, value, callback) => {
- if (!isPassword(value)) {
- callback(new Error('瀵嗙爜涓嶈兘灏戜簬6浣�'))
- } else {
- callback()
- }
- }
- return {
- nodeEnv: process.env.NODE_ENV,
- title: this.$baseTitle,
- form: {
- username: '',
- password: '',
- },
- rules: {
- username: [
- {
- required: true,
- trigger: 'blur',
- validator: validateusername,
- },
- ],
- password: [
- {
- required: true,
- trigger: 'blur',
- validator: validatePassword,
- },
- ],
- },
- loading: false,
- passwordType: 'password',
- redirect: undefined,
- }
+ });
},
- watch: {
- $route: {
- handler(route) {
- this.redirect = (route.query && route.query.redirect) || '/'
- },
- immediate: true,
- },
- },
- created() {
- document.body.style.overflow = 'hidden'
- },
- beforeDestroy() {
- document.body.style.overflow = 'auto'
- },
- mounted() {
- this.form.username = 'admin'
- this.form.password = '123456'
- setTimeout(() => {
- this.handleLogin()
- }, 3000)
- },
- methods: {
- handlePassword() {
- this.passwordType === 'password'
- ? (this.passwordType = '')
- : (this.passwordType = 'password')
- this.$nextTick(() => {
- this.$refs.password.focus()
- })
- },
- handleLogin() {
- this.$refs.form.validate((valid) => {
- if (valid) {
- this.loading = true
- this.$store
- .dispatch('user/login', this.form)
- .then(() => {
- const routerPath =
- this.redirect === '/404' || this.redirect === '/401'
- ? '/'
- : this.redirect
- this.$router.push(routerPath).catch(() => {})
- this.loading = false
- })
- .catch(() => {
- this.loading = false
- })
- } else {
- return false
- }
- })
- },
- },
- }
+ },
+};
</script>
<style lang="scss" scoped>
- .login-container {
- height: 100vh;
- background: url('~@/assets/login_images/background.jpg') center center fixed
- no-repeat;
- background-size: cover;
+.login-container {
+ height: 100vh;
+ background: url("~@/assets/login_images/background.jpg") center center fixed
+ no-repeat;
+ background-size: cover;
- .title {
- font-size: 54px;
- font-weight: 500;
- color: rgba(14, 18, 26, 1);
+ .title {
+ font-size: 54px;
+ font-weight: 500;
+ color: rgba(14, 18, 26, 1);
+ }
+
+ .title-tips {
+ margin-top: 29px;
+ font-size: 26px;
+ font-weight: 400;
+ color: rgba(14, 18, 26, 1);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .login-btn {
+ display: inherit;
+ width: 220px;
+ height: 60px;
+ margin-top: 5px;
+ border: 0;
+
+ &:hover {
+ opacity: 0.9;
}
+ }
- .title-tips {
- margin-top: 29px;
- font-size: 26px;
- font-weight: 400;
- color: rgba(14, 18, 26, 1);
- text-overflow: ellipsis;
- white-space: nowrap;
- }
+ .login-form {
+ position: relative;
+ max-width: 100%;
+ margin: calc((100vh - 425px) / 2) 10% 10%;
+ overflow: hidden;
- .login-btn {
- display: inherit;
- width: 220px;
- height: 60px;
- margin-top: 5px;
- border: 0;
+ .forget-password {
+ width: 100%;
+ margin-top: 40px;
+ text-align: left;
- &:hover {
- opacity: 0.9;
- }
- }
-
- .login-form {
- position: relative;
- max-width: 100%;
- margin: calc((100vh - 425px) / 2) 10% 10%;
- overflow: hidden;
-
- .forget-password {
- width: 100%;
- margin-top: 40px;
- text-align: left;
-
- .forget-pass {
- width: 129px;
- height: 19px;
- font-size: 20px;
- font-weight: 400;
- color: rgba(92, 102, 240, 1);
- }
- }
- }
-
- .tips {
- margin-bottom: 10px;
- font-size: $base-font-size-default;
- color: $base-color-white;
-
- span {
- &:first-of-type {
- margin-right: 16px;
- }
- }
- }
-
- .title-container {
- position: relative;
-
- .title {
- margin: 0 auto 40px auto;
- font-size: 34px;
- font-weight: bold;
- color: $base-color-blue;
- text-align: center;
- }
- }
-
- .svg-container {
- position: absolute;
- top: 14px;
- left: 15px;
- z-index: $base-z-index;
- font-size: 16px;
- color: #d7dee3;
- cursor: pointer;
- user-select: none;
- }
-
- .show-password {
- position: absolute;
- top: 14px;
- right: 25px;
- font-size: 16px;
- color: #d7dee3;
- cursor: pointer;
- user-select: none;
- }
-
- ::v-deep {
- .el-form-item {
- padding-right: 0;
- margin: 20px 0;
- color: #454545;
- background: transparent;
- border: 1px solid transparent;
- border-radius: 2px;
-
- &__content {
- min-height: $base-input-height;
- line-height: $base-input-height;
- }
-
- &__error {
- position: absolute;
- top: 100%;
- left: 18px;
- font-size: $base-font-size-small;
- line-height: 18px;
- color: $base-color-red;
- }
- }
-
- .el-input {
- box-sizing: border-box;
-
- input {
- height: 58px;
- padding-left: 45px;
- font-size: $base-font-size-default;
- line-height: 58px;
- color: $base-font-color;
- background: #f6f4fc;
- border: 0;
- caret-color: $base-font-color;
- }
+ .forget-pass {
+ width: 129px;
+ height: 19px;
+ font-size: 20px;
+ font-weight: 400;
+ color: rgba(92, 102, 240, 1);
}
}
}
+
+ .tips {
+ margin-bottom: 10px;
+ font-size: $base-font-size-default;
+ color: $base-color-white;
+
+ span {
+ &:first-of-type {
+ margin-right: 16px;
+ }
+ }
+ }
+
+ .title-container {
+ position: relative;
+
+ .title {
+ margin: 0 auto 40px auto;
+ font-size: 34px;
+ font-weight: bold;
+ color: $base-color-blue;
+ text-align: center;
+ }
+ }
+
+ .svg-container {
+ position: absolute;
+ top: 14px;
+ left: 15px;
+ z-index: $base-z-index;
+ font-size: 16px;
+ color: #d7dee3;
+ cursor: pointer;
+ user-select: none;
+ }
+
+ .show-password {
+ position: absolute;
+ top: 14px;
+ right: 25px;
+ font-size: 16px;
+ color: #d7dee3;
+ cursor: pointer;
+ user-select: none;
+ }
+
+ ::v-deep {
+ .el-form-item {
+ padding-right: 0;
+ margin: 20px 0;
+ color: #454545;
+ background: transparent;
+ border: 1px solid transparent;
+ border-radius: 2px;
+
+ &__content {
+ min-height: $base-input-height;
+ line-height: $base-input-height;
+ }
+
+ &__error {
+ position: absolute;
+ top: 100%;
+ left: 18px;
+ font-size: $base-font-size-small;
+ line-height: 18px;
+ color: $base-color-red;
+ }
+ }
+
+ .el-input {
+ box-sizing: border-box;
+
+ input {
+ height: 58px;
+ padding-left: 45px;
+ font-size: $base-font-size-default;
+ line-height: 58px;
+ color: $base-font-color;
+ background: #f6f4fc;
+ border: 0;
+ caret-color: $base-font-color;
+ }
+ }
+ }
+}
</style>
--
Gitblit v1.8.0