基于Ant Design vue框架登录demo

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

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

        

          
            {
      textAlign: 'center', borderBottom: 'unset' }"
              @change="handleTabClick"
            >
              
                
                

                
                  {
     rules: [{
      required: true, message: '请输入帐户' }], validateTrigger: 'change'}
                    ]"
                  >
                    {
      color: 'rgba(0,0,0,.25)' }" />
                  
                

                
                  {
     rules: [{
      required: true, message: '请输入密码' }], validateTrigger: 'blur'}
                    ]"
                  >
                    {
      color: 'rgba(0,0,0,.25)' }" />
                  
                
              
            

            "margin-top:24px">
              "large"
                type="primary"
                htmlType="submit"
                class="login-button"
                :loading="state.loginBtn"
                :disabled="state.loginBtn"
              >登录
            
          
        
      

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)
        })
      })
    }

  }

温馨说明：

路径说明：

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