Question

我试图在组件内部获取道具的值，但返回的值不正确。

的 App.vue

<template>
    <v-app>
    <router-view :authentication="auth"></router-view>
</template>

<script>
    import auth from '../auth.js';
    export default {
      data       : () => ({
          auth           : auth
      }),
      mounted: function () {
          this.$nextTick(function () {
              auth.check()
          })
      }
    }
</script>

Dashboard.vue（呈现为路由器视图）

<template>
    <h1>You're Logged In!</h1>
</template>

<script>
    export default {
        props: ['authentication'],
        mounted: function() {
            this.$nextTick(function () {
                console.log(this.authentication.user.authenticated) // Returns false (should be true)
                }
            )
        }
    }
</script>

auth.js

export default {
    user: {
        authenticated: false,
        profile: null
    },
    check() {
        let token = localStorage.getItem('id_token')
        if (token !== null) {
            Vue.http.get(
                'api/user?token=' + token,
            ).then(response => {
                this.user.authenticated = true
                this.user.profile = response.data.user
            })
        }
    }
}

Dashboard.vue中console.log(this.authentication.user.authenticated)的结果返回为false，但Vue devtools表示该值应为true（应该返回的值）。

以下是我的Dasboard.vue组件中通过Vue devtools的道具的屏幕截图：

我尝试过什么

1）我已尝试将user中auth.js对象的值从false更改为true，然后我在{{{}}中获得了正确的输出1}}。但是，这并不好，因为Dashboard.vue函数应该更新check()中user对象的值。

2）我已在auth.js中记录this.authentication的结果，我可以清楚地看到嵌套对象Dashboard.vue为真，但user.authenticated的结果由于某种原因，它仍然是假的。

以下是console.log(this.authentication.user.authenticated)的记录结果的屏幕截图：

Answer 1

我建议采用不同的方法。在进入Vue之前检查授权，然后根据用户是否获得授权，设置适当的路由器路径。

这需要从check中的auth方法返回承诺。

check(){
  return new Promise((resolve, reject) => {
    // do your authentication and set user.authenticated appropriately
    resolve(this.user)
  })
}

然后您的主脚本如下所示：

import Vue from "vue";
import App from "./App";
import router from "./router";
import auth from "./auth";

auth.check().then(user => {
  if (!user.authenticated) {
    router.push("/NotAuthorized");
  }

  new Vue({
    el: "#app",
    router,
    template: "<App/>",
    components: { App }
  });
});

这是working example。

无法从Vue组件中获取正确的道具值

我尝试过什么

1 个答案: