Question

仅当我具有用户详细信息时，我才限制将应用程序加载到DOM：

<template>
  <div id="app">
    <template v-if="loggedUser">
    //...
    </template>
  </div>
</template>

其中loggedUser是商店中的计算属性：

 computed: {
    loggedUser() {
      return this.$store.getters.user;
    }
  }

问题在于其他组件依赖于现有的此属性。例如，在/admin路径下的一个名为admin的组件中，当我将mounted()的用户对象从商店传递到一种方法时，该方法又执行HTTP请求：

mounted(){
   this.someFunc(this.$store.getters.user)
}

，但问题是有时用户存在，而有时用户不存在。如果用户尝试直接从管理页面加载应用程序且该用户不存在，则为true。解决此问题的一种可能方法是在计算属性上使用watch，该属性从商店返回用户：

computed: {
    user() {
        return this.$store.getters.user;
       }
    },
watch: {
    user(newVal) {
        if(newVal) this.someFunc(this.$store.getters.user)
      }
    }

尽管这可能行得通，但即使对于此示例，也感到乏味。然而，由于这个问题，出现了更大，更复杂的问题。另一个可能的选择是尝试将用户保存在localStorage中，但是我猜vuex应该能够解决我的问题，而无需使用任何类型的客户端存储解决方案。知道如何解决这个问题吗？有没有更可靠的方法来确保用户在我的整个应用程序中都可用？

Answer 1

如果您使用vue路由器，则可以在那里验证用户身份

       const ifAuthenticated = (to, from, next) => {
      if (store.state.token) {  // or state.user etc.
        next()
        return
      }
next('/Adminlogin')  // if not authenticated

，路由器路径如下所示：

  {
  path: '/AdminUI',
  name: 'AdminUI',
  component: AdminUI,
  beforeEnter: ifAuthenticated

}

另一种可能的解决方案：

<v-template
    v-show="$store.state.isUserLoggedIn"
</v-template>

别忘了import { mapState } from "vuex";

和store中的

：

 getters: {
    isUserLoggedIn: state => !!state.token
  }

使用vuex确保变量以存储状态存在

1 个答案: