基于Ant Design vue框架登录demo

我们直接进入正题吧~~~
先来看下效果图

那么前端代码呢~~~
不着急，这就双手奉上哈~~

<a-col :span="12">
        <div class="login-body">
          <a-form
            id="formLogin"
            class="user-layout-login"
            ref="formLogin"
            :form="form"
            @submit="handleSubmit"
          >
            <a-tabs
              :activeKey="customActiveKey"
              :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
              @change="handleTabClick"
            >
              <a-tab-pane key="tab1" tab="账号密码登录">
                <a-alert v-if="isLoginError" type="error" showIcon message="账户或密码错误"/>
                <br />
                <a-form-item>
                  <a-input
                    size="large"
                    type="text"
                    placeholder="请输入帐户"
                    v-decorator="[
                      'account',
                      {rules: [{ required: true, message: '请输入帐户' }], validateTrigger: 'change'}
                    ]"
                  >
                    <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
                  </a-input>
                </a-form-item>

                <a-form-item>
                  <a-input
                    size="large"
                    type="password"
                    autocomplete="false"
                    placeholder="请输入密码"
                    v-decorator="[
                      'password',
                      {rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}
                    ]"
                  >
                    <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
                  </a-input>
                </a-form-item>
              </a-tab-pane>
            </a-tabs>

            <a-form-item style="margin-top:24px">
              <a-button
                size="large"
                type="primary"
                htmlType="submit"
                class="login-button"
                :loading="state.loginBtn"
                :disabled="state.loginBtn"
              >登录</a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-col>

handleSubmit(e) {
      /*
      *@Param 防止冒泡
      */
      e.preventDefault()
      const {
        form: { validateFields },
        state,
        customActiveKey,
        Login
      } = this

      state.loginBtn = true

      const validateFieldsKey = customActiveKey === 'tab1' ? ['account', 'password'] : ['mobile', 'captcha']
      // validateFieldsKey是用来声明带有账号和密码的一个总的字段
      validateFields(validateFieldsKey, { force: true }, (err, values) => {
        if (!err) {
        
          /** @description 将用户名和加密的密码到后端进行查询验证,并会走Login方法进入到下一阶段进行流程的走向
           *  @param  路径走向说明：会走到src\store\modules\user.js中的Login方法
            * @fileName Login.vue
            */
            
          const loginParams = { ...values }
          loginParams.account = values.account
          loginParams.password = md5(values.password)
          Login(loginParams)
            .then(res => this.loginSuccess(res))
            .finally(() => {
            /** @description state.loginBtn = false 进行状态的刷新
             * @param 就是说当我们输入账号和密码输入错误时，在提示的同时，也要刷新此登录按钮
              * @fileName Login.vue
              */
              state.loginBtn = false
            })
        } else {
          setTimeout(() => {
            state.loginBtn = false
          }, 600)
        }
      })
    }     

具体走的Logig方法只是参考哈：

Login({
      commit
    }, userInfo) {
      return new Promise((resolve, reject) => {
        login(userInfo).then(response => {
          const result = response.data
          // eslint-disable-next-line no-unused-vars
          const authorities = 'login'
          // if (result.authorities && result.authorities.length > 0) {
          if (authorities || authorities.length > 0) {
            Vue.ls.set(MENU, authorities, null)
            // commit('SET_AUTH', result.authorities)
            commit('SET_INFO', result.user)
          } else {
            reject(new Error('你没有权限，请联系管理员'))
          }

          commit('SET_NAME', {
            // name: result.user.name,
            name: '123',
            welcome: welcome()
          })
          // commit('SET_AVATAR', result.user.avatar)
          commit('SET_AVATAR', '123')
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },
    // 退出
    Logout({
      commit,
      state
    }) {
      return new Promise((resolve) => {
        logout(state.token).then(() => {
          resolve()
        }).catch(() => {
          resolve()
        }).finally(() => {
          commit('SET_TOKEN', '')
          commit('SET_ROLES', [])
          Vue.ls.remove(ACCESS_TOKEN)
        })
      })
    }

  }

温馨说明：

路径说明：

以上流程只是仅供参考哈~~~只是个人觉得把重要的逻辑所罗列出来而已。若是觉得那里有问题，可以留言，大家一起进步，谢谢来客的查看。共勉！！！