登录页-功能优化

src/layout/components/Navbar.vue

@@ -50,10 +50,7 @@
         trigger="hover"
       >
         <div class="avatar-wrapper">
-          <img
+          <img :src="userInfo.avatar" class="user-avatar" />
-            :src="config.MINIO_ENDPOINT_HTTPS + userInfo.avatar"
-            class="user-avatar"
-          />
           <span class="user-nickname">
             {{ userInfo.name }}
           </span>

src/permission.js

@@ -36,8 +36,8 @@ router.beforeEach((to, from, next) => {
       if (store.getters.roles.length === 0) {
         isRelogin.show = true
         // 判断当前用户是否已拉取完user_info信息
-        store.dispatch('GetInfo').then(() => {
         store.dispatch('GetNetConfig').then(res => {
+          store.dispatch('GetInfo').then(() => {
             isRelogin.show = false
             store.dispatch('GenerateRoutes').then(accessRoutes => {
               // 根据roles权限生成可访问的路由表

src/store/modules/user.js

@@ -7,7 +7,7 @@ import { getToken, getLoginInfo, setToken, setLoginInfo, removeToken, removeLogi
 import { isHttp, isEmpty } from "@/utils/validate"
 import defAva from '@/assets/images/profile.jpg'
 import { initMinioClient, parseMinioFilePath } from '@/utils/requestMinio'
-
+import Cookies from 'js-cookie'
 const user = {
   state: {
     loginInfo: getLoginInfo(),
@@ -78,7 +78,9 @@ const user = {
           } else {
             commit('SET_ROLES', ['ROLE_DEFAULT'])
           }
-          commit('SET_USER_INFO', user)
+          Cookies.set("avatar", state.netConfig.MINIO_ENDPOINT_HTTPS + user.avatar || defAva, { expires: 30 });
+          Cookies.set("name", user.name || "", { expires: 30 });
+          commit('SET_USER_INFO', { ...user, avatar: state.netConfig.MINIO_ENDPOINT_HTTPS + user.avatar || defAva })
           cache.session.set('pwrChrtype', res.pwdChrtype)
           /* 初始密码提示 */
           if (res.isDefaultModifyPwd) {

src/views/login.vue

@@ -29,9 +29,9 @@
       >
         <div class="form-header">
           <div class="role-icon">
-            <img :src="$store.state.user.userInfo.avatar" alt="" />
+            <img :src="loginForm.avatar" alt="" />
           </div>
-          <h3 class="title">你好, {{ $store.state.user.userName }}</h3>
+          <h3 class="title">你好, {{ loginForm.name }}</h3>
         </div>
         <el-form-item prop="username">
           <el-input
@@ -161,22 +161,33 @@ export default {
       return CryptoJS.MD5(str).toString();
     },
     getCookie() {
+      const name = Cookies.get("name");
+      const avatar = Cookies.get("avatar");
       const username = Cookies.get("username");
       const password = Cookies.get("password");
       const rememberMe = Cookies.get("rememberMe");
       this.loginForm = {
+        name: name,
+        avatar: avatar,
         username: username === undefined ? this.loginForm.username : username,
         password:
           password === undefined ? this.loginForm.password : decrypt(password),
         rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
       };
+      if (this.loginForm.rememberMe == true) {
+        console.log(this.loginForm);
         this.handleLogin();
+      }
     },
     handleLogin() {
+      console.log(this.loginForm,this.$refs.loginFormRef);
       this.$refs.loginForm.validate((valid) => {
+        console.log(this.loginForm);
         if (valid) {
           this.loading = true;
           if (this.loginForm.rememberMe) {
+            Cookies.set("avatar", this.loginForm.avatar, { expires: 30 });
+            Cookies.set("name", this.loginForm.name, { expires: 30 });
             Cookies.set("username", this.loginForm.username, { expires: 30 });
             Cookies.set("password", encrypt(this.loginForm.password), {
               expires: 30,
@@ -185,6 +196,8 @@ export default {
               expires: 30,
             });
           } else {
+            Cookies.remove("avatar");
+            Cookies.remove("name");
             Cookies.remove("username");
             Cookies.remove("password");
             Cookies.remove("rememberMe");
@@ -194,7 +207,9 @@ export default {
               username: this.loginForm.username,
               password: this.md5Encrypt(this.loginForm.password),
               psign: this.md5Encrypt("xycloud_" + this.loginForm.password),
-              version: this.$store.getters.loginInfo?.upgrade_data?.version || "V01.01.16",
+              version:
+                this.$store.getters.loginInfo?.upgrade_data?.version ||
+                "V01.01.16",
             })
             .then(() => {
               this.$router.push({ path: this.redirect || "/" }).catch(() => {});