问答

ant design vue登录问题

作者:admin 2021-08-21 我要评论

按照官方文档对接服务器需要移除mock, 在移除mock后请求出现异常, 比如login的时候会连着调用login, getinfo, logout三个方法, 另外Vue.ls.set()无法写入数据? L...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

按照官方文档对接服务器需要移除mock, 在移除mock后请求出现异常, 比如login的时候会连着调用login, getinfo, logout三个方法, 另外Vue.ls.set()无法写入数据?

Login.vue

validateFields(validateFieldsKey, { force: true }, (err, values) => {
        if (!err) {
          // console.log('login form', values)
          const loginParams = { ...values }
          delete loginParams.username
          loginParams[!state.loginType ? 'email' : 'username'] = values.username
          loginParams.password = values.password

         # Login action传入请求参数
          Login(loginParams)
            .then((res) => this.loginSuccess(res))
            .catch(err => this.requestFailed(err))
            .finally(() => {
              state.loginBtn = false
            })
        } else {
          setTimeout(() => {
            state.loginBtn = false
          }, 600)
        }
      })

    loginSuccess (res) {
      console.log('res is', res)   // res is undefined
      // check res.homePage define, set $router.push name res.homePage
      // Why not enter onComplete
      /*
      this.$router.push({ name: 'analysis' }, () => {
        console.log('onComplete')
        this.$notification.success({
          message: '欢迎',
          description: `${timeFix()},欢迎回来`
        })
      })
      */
      this.$router.push({ path: '/' })
      // 延迟 1 秒显示欢迎信息
      setTimeout(() => {
        this.$notification.success({
          message: '欢迎',
          description: `${timeFix()},欢迎回来`
        })
      }, 1000)
      this.isLoginError = false
    },

vuex user.js

actions: {
    // 登录并存储access_token
    Login ({ commit }, userInfo) {
      return new Promise((resolve, reject) => {
        login(userInfo).then(response => {
          console.log('response is:', response)  //
          const result = response.data
         // 无法写入localstorage
          Vue.ls.set(ACCESS_TOKEN, result.access_token, 1 * 1 * 60 * 60 * 1000)
          commit('SET_TOKEN', result.access_token)
         // 无法向下传递, 导致loginSuccess无法拿到res
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

个人理解:Login(loginParams)调用的是vuex的user action Login(), 在Login中调用login(userinfo)获取登录成功返回的信息, 然后将token存入localStorage和vuex中, 最后resolve之后在loginSuccess中再次获取response,然后跳转到首页

具体问题: login(userinfo)返回登录成功的信息无法存入loaclStorage中, 同时resolve()时无法向下传递response导致loginSuccess(res)无法获取到res, 然后login的时候只需调用login一个方法, 但是调用login的时候同时调用了getUserInfo和logout

问题出现点: 个人猜测是login的同时调用了logut导致无法刚存入localStorage后的token又被清除

场景重现:
gif有些大请耐心等待或者复制链接地址http://img.os4team.cn/ant-des...
img

###

AntD of Vue不是一个UI库么?怎么还带mock了,你是哪里看的项目啊?

###

请问题主问题解决了么,我也是这种情况

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 使用箭头函数return数据不能实现

    使用箭头函数return数据不能实现

  • 个人小程序号能接入小程序3D地图吗?

    个人小程序号能接入小程序3D地图吗?

  • vue 移动端项目中,使用了better-scrol

    vue 移动端项目中,使用了better-scrol

  • css如何做出区域平均划分为四列

    css如何做出区域平均划分为四列

腾讯云代理商
海外云服务器