Javascript 使用Vue.JS成功登录后如何重定向到主页

我有一个登录页面。如果登录成功，我希望我的应用程序将用户重定向到主页。然后使用API检查凭据。我的问题是，在成功检查凭据之前，我的vue页面会重定向用户

在vue.js帮助论坛上看到类似的主题，我知道我应该发送登录请求，然后等待响应承诺得到解决。我觉得这就是我正在做的，但它显然不会等到响应得到解决后再重定向

这是我的vue页面（脚本部分）中的代码。单击“登录”按钮时，将调用

onSigninClick（）

方法：

import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'SignInLayout',
  data () {
    return {
      username: null,
      password: null
    }
  },
  computed: {
    ...mapGetters('TemplaterAuth', [
      'logged',
      'getUsername',
      'getJwtToken'
    ])
  },
  methods: {
    ...mapActions('TemplaterAuth', [
      'authenticate'
    ]),
    onSigninClick () {
      let creds = {
        username: this.username,
        password: this.password
      }
      this.authenticate(creds).then(response => {
        console.log(this.getUsername)
        console.log(this.getJwtToken)
        console.log('logged:')
        console.log(this.logged)
        this.$router.push('/')
      })
    }
  }
}

和我的

authenticate（）

方法：

export function authenticate (context, creds) {
  let requestConfig = {
    headers: {
      'Content-Type': 'application/json'
    }
  }
  Vue.http.post(
    url + apiPaths.auth,
    creds,
    requestConfig
  ).then(response => {
    return response.json()
  }).then(data => {
    context.commit('setUsername', creds.username)
    context.commit('setJwtToken', data.token)
  }).catch(error => {
    console.log('error:')
    console.log(error)
  })
}

---

当我单击一次登录按钮时，我的控制台日志显示

username

和

jwtToken

的

null

。几分钟后，商店中的值被更新，然后我就可以登录了。

因此，我在发布此消息几秒钟后在Vue论坛上得到了答案：我需要

返回
我的
身份验证方法的承诺。因此，新的代码是：

export function authenticate (context, creds) {
  let requestConfig = {
    headers: {
      'Content-Type': 'application/json'
    }
  }
  return Vue.http.post(
    url + apiPaths.auth,
    creds,
    requestConfig
  ).then(response => {
    return response.json()
  }).then(data => {
    context.commit('setUsername', creds.username)
    context.commit('setJwtToken', data.token)
  }).catch(error => {
    console.log('error:')
    console.log(error)
  })
}

这对我来说有点可疑

第一：我希望您没有使用
vuex
持有您的凭证/代币。

我建议只设置
authenticated:true
，并将其用于您的请求

然后：
查看
vue路由器
，可以利用该路由器检查当前用户是否已登录

最后:
要以编程方式路由到应用程序的各个部分，您可以使用

因此，您必须在登录页面之前存储用户想要的路由，然后以编程方式推送该路由。
我已经在使用guards和push，我的问题是重定向发生得太快。但您提出了一个对我来说是全新的观点：在vuex中存储jwt令牌有什么问题？我阅读了您关于安全提示的链接，如果您理解得很好，vuex相当于localStorage，这是您在第一个链接中推荐的方法之一。此外，我的令牌是加密的，必须存储在客户端的某个位置。糟糕的是，我必须明确地告诉vuex将令牌存储在localStorage中。那我就这么做，谢谢你的提示