login

src/permission.js

@@ -26,8 +26,8 @@ router.beforeEach((to, from, next) => {
 						store.dispatch('GenerateRoutes').then((accessRoutes) => {
 							next()
 							// 根据roles权限生成可访问的路由表
-							//router.addRoutes(accessRoutes) // 动态添加可访问路由表
-							//next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
+							router.addRoutes(accessRoutes) // 动态添加可访问路由表
+							next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
 						})
 					})
 					.catch((err) => {

src/store/modules/permission.js

@@ -37,21 +37,21 @@ const permission = {
 	actions: {
 		// 生成路由
 		GenerateRoutes({ commit }) {
-			// return new Promise((resolve) => {
-			// 	// 向后端请求路由数据
-			// 	// getRouters().then((res) => {
-			// 	// 	const sdata = JSON.parse(JSON.stringify(res.data))
-			// 	// 	const rdata = JSON.parse(JSON.stringify(res.data))
-			// 	// 	const sidebarRoutes = filterAsyncRouter(sdata)
-			// 	// 	const rewriteRoutes = filterAsyncRouter(rdata, false, true)
-			// 	// 	rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
-			// 	// 	commit('SET_ROUTES', rewriteRoutes)
-			// 	// 	commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
-			// 	// 	commit('SET_DEFAULT_ROUTES', sidebarRoutes)
-			// 	// 	commit('SET_TOPBAR_ROUTES', sidebarRoutes)
-			// 	// 	resolve(rewriteRoutes)
-			// 	// })
-			// })
+			return new Promise((resolve) => {
+				// 向后端请求路由数据
+				getRouters().then((res) => {
+					const sdata = JSON.parse(JSON.stringify(res.data))
+					const rdata = JSON.parse(JSON.stringify(res.data))
+					const sidebarRoutes = filterAsyncRouter(sdata)
+					const rewriteRoutes = filterAsyncRouter(rdata, false, true)
+					rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
+					commit('SET_ROUTES', rewriteRoutes)
+					commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
+					commit('SET_DEFAULT_ROUTES', sidebarRoutes)
+					commit('SET_TOPBAR_ROUTES', sidebarRoutes)
+					resolve(rewriteRoutes)
+				})
+			})
 		}
 	}
 }

src/store/modules/user.js

@@ -54,7 +54,7 @@ const user = {
 				getInfo()
 					.then((res) => {
 						const user = res.user
-						//const avatar = user.avatar == '' ? require('@/assets/images/profile.jpg') : process.env.VUE_APP_BASE_API + user.avatar
+						const avatar = user.avatar == '' ? require('@/assets/images/profile.jpg') : process.env.VUE_APP_BASE_API + user.avatar
 						if (res.roles && res.roles.length > 0) {
 							// 验证返回的roles是否是一个非空数组
 							commit('SET_ROLES', res.roles)
@@ -62,8 +62,8 @@ const user = {
 						} else {
 							commit('SET_ROLES', ['ROLE_DEFAULT'])
 						}
-						//commit('SET_NAME', user.userName)
-						//commit('SET_AVATAR', avatar)
+						commit('SET_NAME', user.userName)
+						commit('SET_AVATAR', avatar)
 						resolve(res)
 					})
 					.catch((error) => {

src/views/login.vue

@@ -8,8 +8,8 @@
 					</div>
 					<div class="header-left-line"></div>
 					<div class="header-left-text">
-						<p style="font-size: 24px">CZO智能分析管理系统</p>
-						<p style="font-size: 12px">Enterprise management integration platform</p>
+						<div style="font-size: 24px">CZO智能分析管理系统</div>
+						<div style="font-size: 12px"> Enterprise management integration platform </div>
 					</div>
 				</div>
 				<div class="header-right">
@@ -22,9 +22,9 @@
 		</div>
 		<div class="main">
 			<div class="inner">
-				<div class="mian-info">
-					<p>企业智能信息化 高效管理 节能降耗</p>
-					<p style="margin-top: 20px">实现 标准化、机制化、流程化、责任化、市场化、人性化</p>
+				<div class="main-info">
+					<div class="main-info-text">企业智能信息化 高效管理 节能降耗</div>
+					<div class="main-info-text" style="margin-top: 20px"> 实现 标准化、机制化、流程化、责任化、市场化、人性化 </div>
 					<div class="main-info-link">
 						<a href="javascript:void(0);">产品视频</a>
 						<a href="javascript:void(0);">企业诊断</a>
@@ -36,13 +36,20 @@
 						<div class="main-login-from-user">
 							<label>
 								<span>账号</span>
-								<input type="text" auto-complete="off" v-model="formData.username" />
+								<input type="text" auto-complete="off" v-model="formData.username" @keyup.enter="handleLogin" />
 							</label>
 						</div>
 						<div class="main-login-from-pass">
 							<label>
 								<span>密码</span>
-								<input type="password" auto-complete="off" v-model="formData.password" />
+								<input type="password" auto-complete="off" v-model="formData.password" @keyup.enter="handleLogin" />
+							</label>
+						</div>
+						<div class="main-login-from-pass">
+							<label>
+								<span>验证码</span>
+								<input type="text" auto-complete="off" v-model="formData.code" style="width: 110px" @keyup.enter="handleLogin" />
+								<img :src="codeUrl" @click="getCode" class="login-code-img" />
 							</label>
 						</div>
 						<div class="main-login-from-btn">
@@ -66,13 +73,19 @@
 </template>
 
 <script>
+	import { getCodeImg } from '@/api/login'
+	import Cookies from 'js-cookie'
+	import { encrypt, decrypt } from '@/utils/jsencrypt'
 	export default {
 		data() {
 			return {
+				codeUrl: '',
 				loading: false,
 				formData: {
 					username: 'admin',
-					password: '15645766666'
+					password: 'admin123',
+					code: '',
+					uuid: ''
 				},
 				redirect: undefined
 			}
@@ -85,7 +98,20 @@
 				immediate: true
 			}
 		},
+		created() {
+			this.getCode()
+			//this.getCookie();
+		},
 		methods: {
+			getCode() {
+				getCodeImg().then((res) => {
+					this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff
+					if (this.captchaOnOff) {
+						this.codeUrl = 'data:image/gif;base64,' + res.img
+						this.formData.uuid = res.uuid
+					}
+				})
+			},
 			handleLogin() {
 				if (this.formData.username.trim() == '') {
 					this.$msg({ type: 'error', message: '账号不能为空' })
@@ -95,6 +121,10 @@
 					this.$msg({ type: 'error', message: '密码不能为空' })
 					return
 				}
+				if (this.formData.code.trim() == '') {
+					this.$msg({ type: 'error', message: '未输入验证码' })
+					return
+				}
 				this.loading = true
 				this.$store
 					.dispatch('Login', this.formData)
@@ -113,6 +143,10 @@
 	.login {
 		width: 100%;
 		height: 100vh;
+		.login-code-img {
+			width: 120px;
+			height: 50px;
+		}
 		.header,
 		.footer {
 			width: 100%;
@@ -196,8 +230,8 @@
 				height: 100%;
 				align-items: center;
 				justify-content: space-between;
-				.mian-info {
-					p {
+				.main-info {
+					.main-info-text {
 						color: #fff;
 						font-size: 28px;
 						font-weight: bolder;
@@ -229,7 +263,7 @@
 					}
 				}
 				.main-login {
-					width: 300px;
+					width: 360px;
 					.main-login-title {
 						width: 100%;
 						height: 45px;
@@ -248,9 +282,9 @@
 						box-sizing: border-box;
 						.main-login-from-user,
 						.main-login-from-pass {
-							width: 240px;
+							width: 300px;
 							border: 1px solid #000;
-							height: 30px;
+							height: 50px;
 							border-radius: 5px;
 							margin-bottom: 20px;
 							overflow: hidden;
@@ -259,15 +293,15 @@
 								span {
 									display: inline-block;
 									width: 70px;
-									height: 30px;
+									height: 50px;
 									background-color: #a6a6a6;
 									text-align: center;
-									line-height: 30px;
+									line-height: 50px;
 								}
 								input {
 									display: block;
-									width: 170px;
-									height: 30px;
+									width: 230px;
+									height: 50px;
 									padding: 0;
 									margin: 0;
 									border: none;
@@ -283,7 +317,7 @@
 								width: 100%;
 								color: #fff;
 								background-color: #07276a;
-								height: 35px;
+								height: 50px;
 								border-radius: 5px;
 								outline: none;
 							}

src/views/login2.vue → src/views/login3.vue

@@ -8,8 +8,8 @@
 					</div>
 					<div class="header-left-line"></div>
 					<div class="header-left-text">
-						<div style="font-size: 24px">CZO智能分析管理系统</div>
-						<div style="font-size: 12px"> Enterprise management integration platform </div>
+						<p style="font-size: 24px">CZO智能分析管理系统</p>
+						<p style="font-size: 12px">Enterprise management integration platform</p>
 					</div>
 				</div>
 				<div class="header-right">
@@ -22,9 +22,9 @@
 		</div>
 		<div class="main">
 			<div class="inner">
-				<div class="main-info">
-					<div class="main-info-text">企业智能信息化 高效管理 节能降耗</div>
-					<div class="main-info-text" style="margin-top: 20px"> 实现 标准化、机制化、流程化、责任化、市场化、人性化 </div>
+				<div class="mian-info">
+					<p>企业智能信息化 高效管理 节能降耗</p>
+					<p style="margin-top: 20px">实现 标准化、机制化、流程化、责任化、市场化、人性化</p>
 					<div class="main-info-link">
 						<a href="javascript:void(0);">产品视频</a>
 						<a href="javascript:void(0);">企业诊断</a>
@@ -36,20 +36,13 @@
 						<div class="main-login-from-user">
 							<label>
 								<span>账号</span>
-								<input type="text" auto-complete="off" v-model="formData.username" @keyup.enter="handleLogin" />
+								<input type="text" auto-complete="off" v-model="formData.username" />
 							</label>
 						</div>
 						<div class="main-login-from-pass">
 							<label>
 								<span>密码</span>
-								<input type="password" auto-complete="off" v-model="formData.password" @keyup.enter="handleLogin" />
-							</label>
-						</div>
-						<div class="main-login-from-pass">
-							<label>
-								<span>验证码</span>
-								<input type="text" auto-complete="off" v-model="formData.code" style="width: 110px" @keyup.enter="handleLogin" />
-								<img :src="codeUrl" @click="getCode" class="login-code-img" />
+								<input type="password" auto-complete="off" v-model="formData.password" />
 							</label>
 						</div>
 						<div class="main-login-from-btn">
@@ -73,19 +66,13 @@
 </template>
 
 <script>
-	import { getCodeImg } from '@/api/login'
-	import Cookies from 'js-cookie'
-	import { encrypt, decrypt } from '@/utils/jsencrypt'
 	export default {
 		data() {
 			return {
-				codeUrl: '',
 				loading: false,
 				formData: {
 					username: 'admin',
-					password: 'admin123',
-					code: '',
-					uuid: ''
+					password: '15645766666'
 				},
 				redirect: undefined
 			}
@@ -98,20 +85,7 @@
 				immediate: true
 			}
 		},
-		created() {
-			this.getCode()
-			//this.getCookie();
-		},
 		methods: {
-			getCode() {
-				getCodeImg().then((res) => {
-					this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff
-					if (this.captchaOnOff) {
-						this.codeUrl = 'data:image/gif;base64,' + res.img
-						this.formData.uuid = res.uuid
-					}
-				})
-			},
 			handleLogin() {
 				if (this.formData.username.trim() == '') {
 					this.$msg({ type: 'error', message: '账号不能为空' })
@@ -121,10 +95,6 @@
 					this.$msg({ type: 'error', message: '密码不能为空' })
 					return
 				}
-				if (this.formData.code.trim() == '') {
-					this.$msg({ type: 'error', message: '未输入验证码' })
-					return
-				}
 				this.loading = true
 				this.$store
 					.dispatch('Login', this.formData)
@@ -143,10 +113,6 @@
 	.login {
 		width: 100%;
 		height: 100vh;
-		.login-code-img {
-			width: 120px;
-			height: 50px;
-		}
 		.header,
 		.footer {
 			width: 100%;
@@ -230,8 +196,8 @@
 				height: 100%;
 				align-items: center;
 				justify-content: space-between;
-				.main-info {
-					.main-info-text {
+				.mian-info {
+					p {
 						color: #fff;
 						font-size: 28px;
 						font-weight: bolder;
@@ -263,7 +229,7 @@
 					}
 				}
 				.main-login {
-					width: 360px;
+					width: 300px;
 					.main-login-title {
 						width: 100%;
 						height: 45px;
@@ -282,9 +248,9 @@
 						box-sizing: border-box;
 						.main-login-from-user,
 						.main-login-from-pass {
-							width: 300px;
+							width: 240px;
 							border: 1px solid #000;
-							height: 50px;
+							height: 30px;
 							border-radius: 5px;
 							margin-bottom: 20px;
 							overflow: hidden;
@@ -293,15 +259,15 @@
 								span {
 									display: inline-block;
 									width: 70px;
-									height: 50px;
+									height: 30px;
 									background-color: #a6a6a6;
 									text-align: center;
-									line-height: 50px;
+									line-height: 30px;
 								}
 								input {
 									display: block;
-									width: 230px;
-									height: 50px;
+									width: 170px;
+									height: 30px;
 									padding: 0;
 									margin: 0;
 									border: none;
@@ -317,7 +283,7 @@
 								width: 100%;
 								color: #fff;
 								background-color: #07276a;
-								height: 50px;
+								height: 35px;
 								border-radius: 5px;
 								outline: none;
 							}