Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.6k views
in Technique[技术] by (71.8m points)

ant design vue登录问题

按照官方文档对接服务器需要移除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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...