U 用户登录后权限缓存

he wei

2022-09-02 e05524c35ebeda944b54a84b82ffd774161bf619

U 用户登录后权限缓存

 .env

@@ -9,6 +9,7 @@
VUE_APP_TBAS_TITLES_KEY=admin.tabs.titles
VUE_APP_API_BASE_URL=http://api.iczer.com
VUE_APP_ROLE_LIST=admin.roleList
VUE_APP_PERMITS_KEY=admin.permits
VUE_APP_DEPARTMENT_LIST=admin.departmentList
VUE_APP_PROJECT_MANAGER_LIST= admin.projectManagerList
VUE_APP_GENERAL_MANAGER_LIST = admin.generalManagerList

 src/pages/login/Login.vue

@@ -9,15 +9,37 @@
    </div>
    <div class="login">
      <a-form @submit="onSubmit" :form="form">
        <a-tabs size="large" :tabBarStyle="{textAlign: 'center'}" style="padding: 0 2px;">
        <a-tabs
          size="large"
          :tabBarStyle="{ textAlign: 'center' }"
          style="padding: 0 2px"
        >
          <a-tab-pane tab="账户密码登录" key="1">
            <a-alert type="error" :closable="true" v-show="error" :message="error" showIcon style="margin-bottom: 24px;" />
            <a-alert
              type="error"
              :closable="true"
              v-show="error"
              :message="error"
              showIcon
              style="margin-bottom: 24px"
            />
            <a-form-item>
              <a-input
                autocomplete="autocomplete"
                size="large"
                placeholder="请输入账户名"
                v-decorator="['name', {rules: [{ required: true, message: '请输入账户名', whitespace: true}]}]"
                v-decorator="[
                  'name',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入账户名',
                        whitespace: true,
                      },
                    ],
                  },
                ]"
              >
                <a-icon slot="prefix" type="user" />
              </a-input>
@@ -28,7 +50,18 @@
                placeholder="请输入密码"
                autocomplete="autocomplete"
                type="password"
                v-decorator="['password', {rules: [{ required: true, message: '请输入密码', whitespace: true}]}]"
                v-decorator="[
                  'password',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入密码',
                        whitespace: true,
                      },
                    ],
                  },
                ]"
              >
                <a-icon slot="prefix" type="lock" />
              </a-input>
@@ -48,7 +81,12 @@
                  </a-input>
                </a-col>
                <a-col :span="8" style="padding-left: 4px">
                  <a-button style="width: 100%" class="captcha-button" size="large">获取验证码</a-button>
                  <a-button
                    style="width: 100%"
                    class="captcha-button"
                    size="large"
                    >获取验证码</a-button
                  >
                </a-col>
              </a-row>
            </a-form-item>
@@ -60,14 +98,29 @@
          <a style="float: right">忘记密码</a>
        </div>
        <a-form-item>
          <a-button :loading="logging" style="width: 100%;margin-top: 24px" size="large" htmlType="submit" type="primary">登录</a-button>
          <a-button
            :loading="logging"
            style="width: 100%; margin-top: 24px"
            size="large"
            htmlType="submit"
            type="primary"
            >登录</a-button
          >
        </a-form-item>
      </a-form>
    </div>

    <a-modal v-model="faceVisible" title="人脸登录">
      <template #footer>
        <a-button key="back" @click="{faceVisible = false}">关闭</a-button>
        <a-button
          key="back"
          @click="
            {
              faceVisible = false;
            }
          "
          >关闭</a-button
        >
      </template>
        <face-login
          v-if="faceVisible"
@@ -108,7 +161,7 @@
  },
  methods: {
    ...mapMutations('account', ['setUser', 'setPermissions', 'setRoles', 'setRoleList',
      'setDepartmentList', 'setProjectManagerList', 'setGeneralManagerList']),
      'setDepartmentList', 'setProjectManagerList', 'setGeneralManagerList', 'setPermits']),
    onSubmit (e) {
      let vm = this;
      e.preventDefault()
@@ -137,12 +190,13 @@
      this.logging = false
      const loginRes = res.data
      if (loginRes.code >= 0) {
        const {user, permissions, roles, roleList, departmentList } = this.getData(loginRes.data2, loginRes.data3);
        const {user, permissions, roles, roleList, departmentList, permits } = this.getData(loginRes.data2, loginRes.data3);
        this.setUser(user);
        this.setPermissions(permissions);
        this.setRoles(roles);
        this.setRoleList(roleList);
        this.setDepartmentList(departmentList);
        this.setPermits(permits);
        this.getUserByRoleId(1002);
        this.getUserByRoleId(1003);

@@ -195,6 +249,7 @@
          item.value = item.id;
          return item;
        }),
        permits: data3.permits.map((v) => v.permitId),
      }
      return obj;
    },
@@ -269,7 +324,8 @@
        .title {
          font-size: 33px;
          color: @title-color;
          font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
        font-family: "Myriad Pro", "Helvetica Neue", Arial, Helvetica,
          sans-serif;
          font-weight: 600;
          position: relative;
          top: 2px;

 src/store/modules/account.js

@@ -7,6 +7,7 @@
    routesConfig: null,
    roleList: null,
    departmentList: null,
    permits: null,              // 用户权限列表
    projectManagerList: null,   // 项目经理列表
    generalManagerList: null,   // 总经理列表
  },
@@ -105,7 +106,19 @@
        }
      }
      return state.generalManagerList;
    },
    permits: state => {
      if (!state.permits) {
        try {
          const permits = localStorage.getItem(process.env.VUE_APP_PERMITS_KEY)
          state.permits = JSON.parse(permits)
          state.permits = state.permits ? state.permits : []
        } catch (e) {
          console.error(e.message)
    }
      }
      return state.permits
    },
  },
  mutations: {
    setUser (state, user) {
@@ -139,6 +152,10 @@
    setGeneralManagerList(state, generalManagerList) {
      state.generalManagerList = generalManagerList;
      localStorage.setItem(process.env.VUE_APP_GENERAL_MANAGER_LIST, JSON.stringify(generalManagerList));
    }
    },
    setPermits(state, permits) {
      state.permits = permits
      localStorage.setItem(process.env.VUE_APP_PERMITS_KEY, JSON.stringify(permits))
    },
  }
}