保持登录

src/layout/components/header-tools.vue

@@ -92,6 +92,7 @@ import SettingDrawer from './setting-drawer.vue';
 import { logout } from '@/utils/page-tab-util';
 import { userLogout } from '@/api/system/user';
 import router from '@/router/index';
+import { getCurrentUser,setCurrentUser } from '@/utils/token-util';
 
 export default {
   components: { HeaderNotice, PasswordModal, SettingDrawer },
@@ -114,7 +115,7 @@ export default {
     };
   },
   created() {
-    this.currentUser = JSON.parse(sessionStorage['currentUser']);
+    this.currentUser = getCurrentUser()
     this.groupId = this.currentUser.currentGroupId;
     this.roleId = this.currentUser.currentRoleId;
   },
@@ -144,7 +145,7 @@ export default {
       this.roleId = val;
       this.currentUser.currentGroupId = this.groupId;
       this.currentUser.currentRoleId = val;
-      sessionStorage['currentUser'] = JSON.stringify(this.currentUser);
+      setCurrentUser(this.currentUser)
       this.$store
         .dispatch('user/fetchUserInfo')
         .then(({ menus, homePath, authoritiesRouter }) => {

src/router/index.js

@@ -10,6 +10,7 @@ import { getToken, setToken } from '@/utils/token-util';
 import { routes, getMenuRoutes } from './routes';
 import { getLoginUser } from '@/api/login';
 import { changeRole } from '@/api/layout/index';
+import { getCurrentUser } from '@/utils/token-util';
 
 Vue.use(VueRouter);
 
@@ -96,7 +97,8 @@ router.afterEach((to) => {
   }
 });
 router.roleChange = async ({ menus, homePath, authoritiesRouter }) => {
-  const currentUser = JSON.parse(sessionStorage['currentUser']);
+  const currentUser = getCurrentUser()
+
 
   if (menus && menus.length > 0) {
     router.addRoute(getMenuRoutes([...menus, ...authoritiesRouter], homePath));

src/store/modules/user.js

@@ -5,6 +5,8 @@ import { formatMenus, toTreeData, formatTreeData } from 'ele-admin';
 import { USER_MENUS } from '@/config/setting';
 import { getResourcesTree } from '@/api/layout';
 import { getCurrentUserAuthorityDeptAPI } from '@/api/system/organization';
+import { getCurrentUser } from '@/utils/token-util';
+
 const formatRouter = (list) => {
   let menuList = []; // menuType
   let authorities = [];
@@ -138,7 +140,8 @@ export default {
     // },
     //动态路由
     async fetchUserInfo({ commit, state }) {
-      let currentUser = JSON.parse(sessionStorage['currentUser']);
+      let currentUser = getCurrentUser()
+
       const result = await getResourcesTree({
         groupId: currentUser.currentGroupId,
         roleId: currentUser.currentRoleId

src/utils/page-tab-util.js

@@ -4,7 +4,7 @@
 import store from '@/store';
 import router from '@/router';
 import { Message } from 'element-ui';
-import { removeToken } from '@/utils/token-util';
+import { removeToken,removeCurrentUser } from '@/utils/token-util';
 import { setDocumentTitle } from '@/utils/document-title-util';
 import {
   HOME_PATH,
@@ -239,6 +239,7 @@ export function goHomeRoute(from) {
  */
 export function logout(route, from) {
   removeToken();
+  removeCurrentUser()
   localStorage.clear();
   sessionStorage.clear();
   if (route) {

src/utils/token-util.js

@@ -29,11 +29,46 @@ export function setToken(token, remember) {
     }
   }
 }
+/**
+ * 获取缓存的 当前登陆角色
+ */
+export function getCurrentUser() {
+  let currentUser = sessionStorage.getItem('currentUser');
+  if (!currentUser) {
+    currentUser= localStorage.getItem('currentUser');
+  }
+  return JSON.parse(currentUser);
+}
 
+/**
+ * 缓存 当前登陆角色
+ * @param token token
+ * @param remember 是否永久存储
+ */
+export function setCurrentUser(currentUser, remember) {
+  
+  if (currentUser) {
+    if (remember) {
+      localStorage.setItem('currentUser', JSON.stringify(currentUser));
+    } else {
+      sessionStorage.setItem('currentUser', JSON.stringify(currentUser));
+    }
+  }
+  
+}
 /**
  * 移除 token
  */
 export function removeToken() {
   localStorage.removeItem(TOKEN_STORE_NAME);
   sessionStorage.removeItem(TOKEN_STORE_NAME);
+  
 }
+/**
+ * 移除 currentUser
+ */
+export function removeCurrentUser() {
+  localStorage.removeItem('currentUser');
+  sessionStorage.removeItem('currentUser');
+  
+}

src/views/login/index.vue

@@ -106,310 +106,314 @@
 </template>
 
 <script>
-import I18nIcon from '@/layout/components/i18n-icon.vue';
-import { getToken } from '@/utils/token-util';
-import { login, getCaptcha } from '@/api/login';
-import xyy from '@/assets/xyy.jpg';
-import { getPathAddress } from '@/api/system/file';
+  import I18nIcon from '@/layout/components/i18n-icon.vue';
+  import { getToken } from '@/utils/token-util';
+  import { login, getCaptcha } from '@/api/login';
+  import xyy from '@/assets/xyy.jpg';
+  import { getPathAddress } from '@/api/system/file';
+  import { setCurrentUser } from '@/utils/token-util';
 
-export default {
-  // eslint-disable-next-line vue/multi-word-component-names
-  name: 'Login',
-  components: { I18nIcon },
-  data() {
-    return {
-      // 登录框方向, 0居中, 1居右, 2居左
-      xyy,
-      direction: 0,
-      // 加载状态
-      loading: false,
-      // 表单数据
-      form: {
-        loginName: localStorage.getItem('accountInfo')
-          ? JSON.parse(localStorage.getItem('accountInfo')).loginName
-          : '',
-        loginPwd: localStorage.getItem('accountInfo')
-          ? JSON.parse(localStorage.getItem('accountInfo')).loginPwd
-          : '',
-        remember: localStorage.getItem('accountInfo')
-          ? JSON.parse(localStorage.getItem('accountInfo')).remember
-          : false,
-        captcha: '',
-        uuid: ''
-      },
-      // 验证码base64数据
-      captcha: '',
-      // 验证码内容, 实际项目去掉
-      text: ''
-    };
-  },
-  computed: {
-    // 表单验证规则
-    rules() {
+  export default {
+    // eslint-disable-next-line vue/multi-word-component-names
+    name: 'Login',
+    components: { I18nIcon },
+    data() {
       return {
-        loginName: [
-          {
-            required: true,
-            message: this.$t('请输入登录账号'),
-            type: 'string',
-            trigger: 'blur'
-          }
-        ],
-        loginPwd: [
-          {
-            required: true,
-            message: this.$t('请输入登录密码'),
-            type: 'string',
-            trigger: 'blur'
-          }
-        ],
-
-        captcha: [
-          {
-            required: true,
-            message: '验证码不能为空',
-            type: 'string',
-            trigger: 'blur'
-          }
-        ]
+        // 登录框方向, 0居中, 1居右, 2居左
+        xyy,
+        direction: 0,
+        // 加载状态
+        loading: false,
+        // 表单数据
+        form: {
+          loginName: localStorage.getItem('accountInfo')
+            ? JSON.parse(localStorage.getItem('accountInfo')).loginName
+            : '',
+          loginPwd: localStorage.getItem('accountInfo')
+            ? JSON.parse(localStorage.getItem('accountInfo')).loginPwd
+            : '',
+          remember: localStorage.getItem('accountInfo')
+            ? JSON.parse(localStorage.getItem('accountInfo')).remember
+            : false,
+          captcha: '',
+          uuid: ''
+        },
+        // 验证码base64数据
+        captcha: '',
+        // 验证码内容, 实际项目去掉
+        text: ''
       };
-    }
-  },
-  created() {
-    this.changeCaptcha();
-    if (getToken()) {
-      this.goHome();
-    } else {
-      // 重置菜单权限
-      this.$store.commit('user/setMenus', null);
-    }
-  },
-  methods: {
-    /* 提交 */
-    submit() {
-      this.$refs.form.validate((valid) => {
-        if (!valid) {
-          return false;
-        }
-        this.loading = true;
-        login(this.form)
-          .then(async (res) => {
-            localStorage.setItem('userId', res.data.userId);
-            // 用户信息
-            if (res.data?.loginChangeGroupVOList.length > 0) {
-              sessionStorage['currentUser'] = JSON.stringify({
-                currentGroupId: res.data.loginChangeGroupVOList[0].groupId,
-                currentRoleId:
-                  res.data.loginChangeGroupVOList[0].loginChangeRoleVOList[0]
-                    .roleId
-              });
+    },
+    computed: {
+      // 表单验证规则
+      rules() {
+        return {
+          loginName: [
+            {
+              required: true,
+              message: this.$t('请输入登录账号'),
+              type: 'string',
+              trigger: 'blur'
             }
-            const filePath = await getPathAddress();
-            res.data.avatarAddress =
-              res.data.avatar && res.data.avatar.length
-                ? filePath + res.data.avatar[0].storePath
-                : xyy;
-            this.$store.commit('user/setUserInfo', res.data);
-            this.loading = false;
-            this.$message.success(res.message);
+          ],
+          loginPwd: [
+            {
+              required: true,
+              message: this.$t('请输入登录密码'),
+              type: 'string',
+              trigger: 'blur'
+            }
+          ],
 
-            if (this.form.remember) {
-              localStorage.setItem('accountInfo', JSON.stringify(this.form));
-            } else {
-              localStorage.removeItem('accountInfo');
+          captcha: [
+            {
+              required: true,
+              message: '验证码不能为空',
+              type: 'string',
+              trigger: 'blur'
             }
+          ]
+        };
+      }
+    },
+    created() {
+      this.changeCaptcha();
+      if (getToken()) {
+        this.goHome();
+      } else {
+        // 重置菜单权限
+        this.$store.commit('user/setMenus', null);
+      }
+    },
+    methods: {
+      /* 提交 */
+      submit() {
+        this.$refs.form.validate((valid) => {
+          if (!valid) {
+            return false;
+          }
+          this.loading = true;
+          login(this.form)
+            .then(async (res) => {
+              localStorage.setItem('userId', res.data.userId);
+              // 用户信息
+              if (res.data?.loginChangeGroupVOList.length > 0) {
+                setCurrentUser(
+                  {
+                    currentGroupId: res.data.loginChangeGroupVOList[0].groupId,
+                    currentRoleId:
+                      res.data.loginChangeGroupVOList[0]
+                        .loginChangeRoleVOList[0].roleId
+                  },
+                  this.form.remember
+                );
+              }
+              const filePath = await getPathAddress();
+              res.data.avatarAddress =
+                res.data.avatar && res.data.avatar.length
+                  ? filePath + res.data.avatar[0].storePath
+                  : xyy;
+              this.$store.commit('user/setUserInfo', res.data);
+              this.loading = false;
+              this.$message.success(res.message);
 
-            await this.$store.dispatch('user/getCurrentUserAuthorityDept');
-            await this.$store.dispatch('paramsSetData/setParamsDataInfo');
-            this.goHome();
+              if (this.form.remember) {
+                localStorage.setItem('accountInfo', JSON.stringify(this.form));
+              } else {
+                localStorage.removeItem('accountInfo');
+              }
+
+              await this.$store.dispatch('user/getCurrentUserAuthorityDept');
+              await this.$store.dispatch('paramsSetData/setParamsDataInfo');
+              this.goHome();
+            })
+            .catch((e) => {
+              this.changeCaptcha();
+              this.loading = false;
+              // this.$message.error(e.message);
+            });
+        });
+      },
+      /* 跳转到首页 */
+      goHome() {
+        this.$router.push(this.$route?.query?.from ?? '/').catch(() => {});
+      },
+      /* 更换图形验证码 */
+      changeCaptcha() {
+        this.form.uuid = this.generateUUID();
+        // 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
+        getCaptcha({ uuid: this.form.uuid })
+          .then((data) => {
+            this.captcha = URL.createObjectURL(data.data);
+            this.$refs?.form?.clearValidate();
           })
           .catch((e) => {
-            this.changeCaptcha();
-            this.loading = false;
             // this.$message.error(e.message);
           });
-      });
-    },
-    /* 跳转到首页 */
-    goHome() {
-      this.$router.push(this.$route?.query?.from ?? '/').catch(() => {});
-    },
-    /* 更换图形验证码 */
-    changeCaptcha() {
-      this.form.uuid = this.generateUUID();
-      // 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
-      getCaptcha({ uuid: this.form.uuid })
-        .then((data) => {
-          this.captcha = URL.createObjectURL(data.data);
-          this.$refs?.form?.clearValidate();
-        })
-        .catch((e) => {
-          // this.$message.error(e.message);
-        });
-    },
-    generateUUID() {
-      var d = new Date().getTime(); //Timestamp
-      var d2 =
-        (performance && performance.now && performance.now() * 1000) || 0; //Time in microseconds since page-load or 0 if unsupported
-      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
-        /[xy]/g,
-        function (c) {
-          var r = Math.random() * 16; //random number between 0 and 16
-          if (d > 0) {
-            //Use timestamp until depleted
-            r = (d + r) % 16 | 0;
-            d = Math.floor(d / 16);
-          } else {
-            //Use microseconds since page-load if supported
-            r = (d2 + r) % 16 | 0;
-            d2 = Math.floor(d2 / 16);
+      },
+      generateUUID() {
+        var d = new Date().getTime(); //Timestamp
+        var d2 =
+          (performance && performance.now && performance.now() * 1000) || 0; //Time in microseconds since page-load or 0 if unsupported
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
+          /[xy]/g,
+          function (c) {
+            var r = Math.random() * 16; //random number between 0 and 16
+            if (d > 0) {
+              //Use timestamp until depleted
+              r = (d + r) % 16 | 0;
+              d = Math.floor(d / 16);
+            } else {
+              //Use microseconds since page-load if supported
+              r = (d2 + r) % 16 | 0;
+              d2 = Math.floor(d2 / 16);
+            }
+            return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
           }
-          return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
-        }
-      );
+        );
+      }
     }
-  }
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-/* 背景 */
-.login-wrapper {
-  padding: 50px 20px;
-  position: relative;
-  box-sizing: border-box;
-  background-image: url('@/assets/bg-login.jpg');
-  background-repeat: no-repeat;
-  background-size: cover;
-  min-height: 100vh;
+  /* 背景 */
+  .login-wrapper {
+    padding: 50px 20px;
+    position: relative;
+    box-sizing: border-box;
+    background-image: url('@/assets/bg-login.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    min-height: 100vh;
 
-  &:before {
-    content: '';
-    background-color: rgba(0, 0, 0, 0.2);
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    &:before {
+      content: '';
+      background-color: rgba(0, 0, 0, 0.2);
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
   }
-}
 
-/* 卡片 */
-.login-form {
-  margin: 0 auto;
-  width: 360px;
-  max-width: 100%;
-  padding: 25px 30px;
-  position: relative;
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
-  box-sizing: border-box;
-  border-radius: 4px;
-  z-index: 2;
+  /* 卡片 */
+  .login-form {
+    margin: 0 auto;
+    width: 360px;
+    max-width: 100%;
+    padding: 25px 30px;
+    position: relative;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
+    box-sizing: border-box;
+    border-radius: 4px;
+    z-index: 2;
 
-  h4 {
-    text-align: center;
-    margin: 0 0 25px 0;
-  }
+    h4 {
+      text-align: center;
+      margin: 0 0 25px 0;
+    }
 
-  & > .el-form-item {
-    margin-bottom: 25px;
+    & > .el-form-item {
+      margin-bottom: 25px;
+    }
   }
-}
-
-.login-form-right .login-form {
-  margin: 0 15% 0 auto;
-}
-
-.login-form-left .login-form {
-  margin: 0 auto 0 15%;
-}
-
-/* 验证码 */
-.login-input-group {
-  display: flex;
-  align-items: center;
 
-  :deep(.el-input) {
-    flex: 1;
+  .login-form-right .login-form {
+    margin: 0 15% 0 auto;
   }
-}
 
-.login-captcha {
-  height: 38px;
-  width: 102px;
-  margin-left: 10px;
-  border-radius: 4px;
-  border: 1px solid #dcdfe6;
-  text-align: center;
-  cursor: pointer;
-
-  &:hover {
-    opacity: 0.75;
+  .login-form-left .login-form {
+    margin: 0 auto 0 15%;
   }
-}
 
-.login-btn {
-  display: block;
-  width: 100%;
-}
+  /* 验证码 */
+  .login-input-group {
+    display: flex;
+    align-items: center;
 
-/* 第三方登录图标 */
-.login-oauth-icon {
-  color: #fff;
-  padding: 5px;
-  margin: 0 10px;
-  font-size: 18px;
-  border-radius: 50%;
-  cursor: pointer;
-}
+    :deep(.el-input) {
+      flex: 1;
+    }
+  }
 
-/* 底部版权 */
-.login-copyright {
-  color: #eee;
-  padding-top: 20px;
-  text-align: center;
-  position: relative;
-  z-index: 1;
-}
+  .login-captcha {
+    height: 38px;
+    width: 102px;
+    margin-left: 10px;
+    border-radius: 4px;
+    border: 1px solid #dcdfe6;
+    text-align: center;
+    cursor: pointer;
 
-/* 响应式 */
-@media screen and (min-height: 550px) {
-  .login-form {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translateX(-50%);
-    margin-top: -220px;
+    &:hover {
+      opacity: 0.75;
+    }
   }
 
-  .login-form-right .login-form,
-  .login-form-left .login-form {
-    left: auto;
-    right: 15%;
-    transform: translateX(0);
-    margin: -220px auto auto auto;
+  .login-btn {
+    display: block;
+    width: 100%;
   }
 
-  .login-form-left .login-form {
-    right: auto;
-    left: 15%;
+  /* 第三方登录图标 */
+  .login-oauth-icon {
+    color: #fff;
+    padding: 5px;
+    margin: 0 10px;
+    font-size: 18px;
+    border-radius: 50%;
+    cursor: pointer;
   }
 
+  /* 底部版权 */
   .login-copyright {
-    position: absolute;
-    bottom: 20px;
-    right: 0;
-    left: 0;
+    color: #eee;
+    padding-top: 20px;
+    text-align: center;
+    position: relative;
+    z-index: 1;
   }
-}
 
-@media screen and (max-width: 768px) {
-  .login-form-right .login-form,
-  .login-form-left .login-form {
-    left: 50%;
-    right: auto;
-    transform: translateX(-50%);
-    margin-right: auto;
+  /* 响应式 */
+  @media screen and (min-height: 550px) {
+    .login-form {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translateX(-50%);
+      margin-top: -220px;
+    }
+
+    .login-form-right .login-form,
+    .login-form-left .login-form {
+      left: auto;
+      right: 15%;
+      transform: translateX(0);
+      margin: -220px auto auto auto;
+    }
+
+    .login-form-left .login-form {
+      right: auto;
+      left: 15%;
+    }
+
+    .login-copyright {
+      position: absolute;
+      bottom: 20px;
+      right: 0;
+      left: 0;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    .login-form-right .login-form,
+    .login-form-left .login-form {
+      left: 50%;
+      right: auto;
+      transform: translateX(-50%);
+      margin-right: auto;
+    }
   }
-}
 </style>