记住密码 保存当前角色

src/layout/components/header-tools.vue

@@ -99,6 +99,7 @@
   import { userLogout } from '@/api/system/user';
   import { SYSTEM_NAME } from '@/config/setting';
   import router from '@/router/index';
+  import { getCurrentUser,setCurrentUser } from '@/utils/token-util';
 
   export default {
     components: { HeaderNotice, PasswordModal, SettingDrawer, I18nIcon },
@@ -121,7 +122,7 @@
       };
     },
     created() {
-      this.currentUser = JSON.parse(sessionStorage['currentUser']);
+      this.currentUser = getCurrentUser()
       this.groupId = this.currentUser.currentGroupId;
       this.roleId = this.currentUser.currentRoleId;
     },
@@ -149,7 +150,7 @@
         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

@@ -6,7 +6,7 @@ import NProgress from 'nprogress';
 import VueRouter from 'vue-router';
 import { WHITE_LIST, REDIRECT_PATH, LAYOUT_PATH } from '@/config/setting';
 import store from '@/store';
-import { getToken, setToken } from '@/utils/token-util';
+import { getToken, setToken, getCurrentUser  } from '@/utils/token-util';
 
 import { routes, getMenuRoutes } from './routes';
 import { SYSTEM_NAME } from '@/config/setting';
@@ -93,7 +93,7 @@ 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(

src/store/modules/user.js

@@ -7,6 +7,8 @@ import { getResourcesTree } from '@/api/layout';
 import { SYSTEM_NAME } from '@/config/setting';
 import Vue from 'vue';
 import {getCurrentUserAuthorityDeptAPI} from "@/api/login";
+import { getCurrentUser,setCurrentUser } from '@/utils/token-util';
+
 const formatRouter = (list) => {
   let menuList = []; // menuType
   let authorities = [];
@@ -122,7 +124,7 @@ export default {
     // },
     //动态路由
     async fetchUserInfo ({ commit }) {
-      let currentUser=JSON.parse(sessionStorage['currentUser'])
+      let currentUser = getCurrentUser()
       const result = await getResourcesTree({groupId:currentUser.currentGroupId,roleId:currentUser.currentRoleId}).catch(() => {});
       const list = result.filter((i) => i.path === `/page-${SYSTEM_NAME}`);
       if (!list.length) {

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 { SYSTEM_NAME } from '@/config/setting';
 import {
@@ -242,6 +242,7 @@ export function goHomeRoute (from) {
  */
 export function logout (route, from) {
   removeToken();
+  removeCurrentUser();
   if (route) {
     router.push({
       path: '/login',

src/utils/token-util.js

@@ -30,6 +30,32 @@ 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) {
+  removeCurrentUser()
+  if (currentUser) {
+    if (remember) {
+      localStorage.setItem('currentUser', JSON.stringify(currentUser));
+    } 
+    sessionStorage.setItem('currentUser', JSON.stringify(currentUser));
+  }
+}
 /**
  * 移除 token
  */
@@ -37,3 +63,10 @@ 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

@@ -107,258 +107,261 @@
 </template>
 
 <script>
-import I18nIcon from '@/layout/components/i18n-icon.vue';
-import { getToken } from '@/utils/token-util';
-import { login, getCaptcha, sub } from '@/api/login';
-import { SYSTEM_NAME } from '@/config/setting';
-
-export default {
-  // eslint-disable-next-line vue/multi-word-component-names
-  name: 'Login',
-  components: { I18nIcon },
-  data() {
-    return {
-      // 登录框方向, 0居中, 1居右, 2居左
-      direction: 0,
-      // 加载状态
-      loading: false,
-      // 表单数据
-      form: {
-        loginName: 'mes111',
-        loginPwd: '123456',
-        remember: true
-      },
-      // 验证码base64数据
-      captcha: '',
-      // 验证码内容, 实际项目去掉
-      text: ''
-    };
-  },
-  computed: {
-    // 表单验证规则
-    rules() {
+  import I18nIcon from '@/layout/components/i18n-icon.vue';
+  import { getToken } from '@/utils/token-util';
+  import { login, getCaptcha, sub } from '@/api/login';
+  import { SYSTEM_NAME } from '@/config/setting';
+  import { setCurrentUser } from '@/utils/token-util';
+  export default {
+    // eslint-disable-next-line vue/multi-word-component-names
+    name: 'Login',
+    components: { I18nIcon },
+    data() {
       return {
-        loginName: [
-          {
-            required: true,
-            message: this.$t('login.loginName'),
-            type: 'string',
-            trigger: 'blur'
-          }
-        ],
-        loginPwd: [
-          {
-            required: true,
-            message: this.$t('login.loginPwd'),
-            type: 'string',
-            trigger: 'blur'
-          }
-        ]
+        // 登录框方向, 0居中, 1居右, 2居左
+        direction: 0,
+        // 加载状态
+        loading: false,
+        // 表单数据
+        form: {
+          loginName: 'mes111',
+          loginPwd: '123456',
+          remember: true
+        },
+        // 验证码base64数据
+        captcha: '',
+        // 验证码内容, 实际项目去掉
+        text: ''
       };
-    }
-  },
-  created() {
-    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((res) => {
-            localStorage.setItem(`userId-${SYSTEM_NAME}`, 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('login.loginName'),
+              type: 'string',
+              trigger: 'blur'
+            }
+          ],
+          loginPwd: [
+            {
+              required: true,
+              message: this.$t('login.loginPwd'),
+              type: 'string',
+              trigger: 'blur'
             }
-            this.$store.commit('user/setUserInfo', res.data);
-            this.loading = false;
-            this.$message.success(res.message);
-            this.$store.dispatch('user/getCurrentUserAuthorityDept');
-            this.goHome();
+          ]
+        };
+      }
+    },
+    created() {
+      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((res) => {
+              localStorage.setItem(`userId-${SYSTEM_NAME}`, 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
+                );
+              }
+              this.$store.commit('user/setUserInfo', res.data);
+              this.loading = false;
+              this.$message.success(res.message);
+              this.$store.dispatch('user/getCurrentUserAuthorityDept');
+              this.goHome();
+            })
+            .catch((e) => {
+              this.loading = false;
+              // this.$message.error(e.message);
+            });
+        });
+      },
+      /* 跳转到首页 */
+      goHome() {
+        this.$router.push(this.$route?.query?.from ?? '/').catch(() => {});
+      },
+      /* 更换图形验证码 */
+      changeCaptcha() {
+        // 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
+        getCaptcha()
+          .then((data) => {
+            this.captcha = data.base64;
+            // 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 可以根据自己后端接口修改
+            this.text = data.text;
+            // 自动回填验证码, 实际项目去掉这个
+            this.form.code = this.text;
+            this.$refs?.form?.clearValidate();
           })
           .catch((e) => {
-            this.loading = false;
             // this.$message.error(e.message);
           });
-      });
-    },
-    /* 跳转到首页 */
-    goHome() {
-      this.$router.push(this.$route?.query?.from ?? '/').catch(() => {});
-    },
-    /* 更换图形验证码 */
-    changeCaptcha() {
-      // 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
-      getCaptcha()
-        .then((data) => {
-          this.captcha = data.base64;
-          // 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 可以根据自己后端接口修改
-          this.text = data.text;
-          // 自动回填验证码, 实际项目去掉这个
-          this.form.code = this.text;
-          this.$refs?.form?.clearValidate();
-        })
-        .catch((e) => {
-          // this.$message.error(e.message);
-        });
+      }
     }
-  }
-};
+  };
 </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>