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

@@ -3,21 +3,43 @@
    <div class="top">
      <div class="header">
        <img alt="logo" class="logo" src="@/assets/img/logo.png" />
        <span class="title">{{systemName}}</span>
        <span class="title">{{ systemName }}</span>
      </div>
      <div class="desc">智能化文件管理平台 让文件管理更简单</div>
    </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>
@@ -36,7 +69,7 @@
          </a-tab-pane>
          <a-tab-pane tab="手机号登录" key="2" :disabled="true">
            <a-form-item>
              <a-input size="large" placeholder="mobile number" >
              <a-input size="large" placeholder="mobile number">
                <a-icon slot="prefix" type="mobile" />
              </a-input>
            </a-form-item>
@@ -48,32 +81,52 @@
                  </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>
          </a-tab-pane>
        </a-tabs>
        <div>
          <a-checkbox :checked="true" >自动登录</a-checkbox>
          <a-checkbox :checked="true">自动登录</a-checkbox>
          <a @click="faceLogin()">人脸登录</a>
          <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"
          :visible.sync="faceVisible"
          @success="faceSuccess"
        ></face-login>
      <face-login
        v-if="faceVisible"
        :visible.sync="faceVisible"
        @success="faceSuccess"
      ></face-login>
    </a-modal>
  </common-layout>
</template>
@@ -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;
    },
@@ -252,59 +307,60 @@
</script>

<style lang="less" scoped>
  .common-layout{
    .top {
      text-align: center;
      .header {
        height: 44px;
        line-height: 44px;
        a {
          text-decoration: none;
        }
        .logo {
          height: 44px;
          vertical-align: top;
          margin-right: 16px;
        }
        .title {
          font-size: 33px;
          color: @title-color;
          font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
          font-weight: 600;
          position: relative;
          top: 2px;
        }
.common-layout {
  .top {
    text-align: center;
    .header {
      height: 44px;
      line-height: 44px;
      a {
        text-decoration: none;
      }
      .desc {
        font-size: 14px;
        color: @text-color-second;
        margin-top: 12px;
        margin-bottom: 40px;
      .logo {
        height: 44px;
        vertical-align: top;
        margin-right: 16px;
      }
      .title {
        font-size: 33px;
        color: @title-color;
        font-family: "Myriad Pro", "Helvetica Neue", Arial, Helvetica,
          sans-serif;
        font-weight: 600;
        position: relative;
        top: 2px;
      }
    }
    .login{
      width: 368px;
      margin: 0 auto;
      @media screen and (max-width: 576px) {
        width: 95%;
    .desc {
      font-size: 14px;
      color: @text-color-second;
      margin-top: 12px;
      margin-bottom: 40px;
    }
  }
  .login {
    width: 368px;
    margin: 0 auto;
    @media screen and (max-width: 576px) {
      width: 95%;
    }
    @media screen and (max-width: 320px) {
      .captcha-button {
        font-size: 14px;
      }
      @media screen and (max-width: 320px) {
        .captcha-button{
          font-size: 14px;
        }
      }
      .icon {
        font-size: 24px;
        color: @text-color-second;
        margin-left: 16px;
        vertical-align: middle;
        cursor: pointer;
        transition: color 0.3s;
    }
    .icon {
      font-size: 24px;
      color: @text-color-second;
      margin-left: 16px;
      vertical-align: middle;
      cursor: pointer;
      transition: color 0.3s;

        &:hover {
          color: @primary-color;
        }
      &:hover {
        color: @primary-color;
      }
    }
  }
}
</style>

 src/store/modules/account.js

@@ -7,6 +7,7 @@
    routesConfig: null,
    roleList: null,
    departmentList: null,
    permits: null,              // 用户权限列表
    projectManagerList: null,   // 项目经理列表
    generalManagerList: null,   // 总经理列表
  },
@@ -59,56 +60,68 @@
      return state.routesConfig
    },
    departmentList: state => {
      if(!state.departmentList) {
      if (!state.departmentList) {
        try {
          const departmentList = localStorage.getItem(process.env.VUE_APP_DEPARTMENT_LIST);
          state.departmentList = JSON.parse(departmentList);
          state.departmentList = state.departmentList?state.departmentList:[];
        }catch (e){
          state.departmentList = state.departmentList ? state.departmentList : [];
        } catch (e) {
          console.error(e.message);
        }
      }
      return state.departmentList;
    },
    roleList: state => {
      if(!state.roleList) {
      if (!state.roleList) {
        try {
          const roleList = localStorage.getItem(process.env.VUE_APP_ROLE_LIST);
          state.roleList = JSON.parse(roleList);
          state.roleList = state.roleList?state.roleList:[];
        }catch (e){
          state.roleList = state.roleList ? state.roleList : [];
        } catch (e) {
          console.error(e.message);
        }
      }
      return state.roleList;
    },
    projectManagerList: state=>{
      if(!state.projectManagerList) {
    projectManagerList: state => {
      if (!state.projectManagerList) {
        try {
          const projectManagerList = localStorage.getItem(process.env.VUE_APP_PROJECT_MANAGER_LIST);
          state.projectManagerList = JSON.parse(projectManagerList);
          state.projectManagerList = state.projectManagerList?state.projectManagerList:[];
        }catch (e){
          state.projectManagerList = state.projectManagerList ? state.projectManagerList : [];
        } catch (e) {
          console.error(e.message);
        }
      }
      return state.projectManagerList;
    },
    generalManagerList: state=>{
      if(!state.generalManagerList) {
    generalManagerList: state => {
      if (!state.generalManagerList) {
        try {
          const generalManagerList = localStorage.getItem(process.env.VUE_APP_GENERAL_MANAGER_LIST);
          state.generalManagerList = JSON.parse(generalManagerList);
          state.generalManagerList = state.generalManagerList?state.generalManagerList:[];
        }catch (e){
          state.generalManagerList = state.generalManagerList ? state.generalManagerList : [];
        } catch (e) {
          console.error(e.message);
        }
      }
      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) {
    setUser(state, user) {
      state.user = user
      localStorage.setItem(process.env.VUE_APP_USER_KEY, JSON.stringify(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))
    },
  }
}