Vue 및 Vuex가 html에서 적절한 값을 취득하지 않음

Vue 및 Vuex가 html에서 적절한 값을 취득하지 않음

사용자의 역할에 따라 특정 메뉴 항목만 표시하는 네비게이션바가 있습니다.

다음은 HTML입니다(간단하게 하기 위해 1개만 제외한 모든 메뉴 항목을 삭제했습니다).

<v-speed-dial class="speed-dial-container contextual-text-menu" v-if="user && user.emailVerified" fixed top right
  direction="bottom" transition="slide-y-transition">
  
<v-icon v-if="checkAuthorization(['superAdmin', 'admin', 'pastor', 'member']) === true" class="mt-2"
    @click="sendComponent({ component: 'Dashboard' })">$admin</v-icon>
  
</v-speed-dial>

내 방법:

async checkAuthorization(permissions) {
  if (permissions.length > 0) {
    const temp = await this.$store.dispatch('UserData/isAuthorized', permissions)
    return temp
  }
},

Vuex 스토어:

isAuthorized({
  state
}, permissions) {
  const userRoles = state.roles
  if (permissions && userRoles) {
    const found = userRoles.some(r => permissions.includes(r))
    return found
  }
},

콘솔 로그에는 모두 올바른 값이 표시되지만 HTML은 이에 따라 응답하지 않습니다.

예: 이 코드 행에서checkAuthorization(['superAdmin', 'admin', 'pastor', 'member']) === true'member'를 추가하고 'member' 역할만 가진 사용자로 로그인했습니다.콘솔 로그를 보면 모두 true가 반환되므로 이 메뉴 항목이 표시되지만 표시되지 않습니다.

댓글에서 지적하신 것처럼checkAuthorization비동기 함수이며 Promise를 반환하므로,promise === true.

그건 차치하고, 난 변할거야isAuthorized액션이 아닌 vuex getter가 되는 것, 예를 들어,

getters: {
  // ...
  isAuthorized: (state) => (permissions) => {
    if (permissions && state.roles) {
      return state.roles.some(r => permissions.includes(r))
    }
    return false;
  }
}

업데이트checkAuthorization예를 들어, 약속을 반환하지 않습니다.

function checkAuthorization(permissions) {
  if (permissions.length > 0) {
    return this.$store.getters.isAuthorized(permissions);
  }
  return false;
}

내가 주로 하는 일:

다른 사용자 상태를 다음과 같이 추가합니다.Unknown디폴트 상태로 합니다.

main.js(또는 main.ts)에서는 상태를 호출합니다.initialize" 를 지정해, 유저의 상태를 판별합니다.

그리고 네비게이션 가드를 사용하는 것이 포인트입니다.라우터 링크(또는 이 스텝의 URL 또는 임의의 장소)에서 라우팅 가드를 체크하는 것이 아니라 라우터에서 정의해야 합니다.이 있습니다.router.beforeEach사용자가 사용할 수 있는 기능을 사용하면 사용자가 해당 경로를 사용할 수 있는지 확인하고 사용자에게 권한이 없는 경우 사용자를 401 페이지로 리디렉션할 수 있습니다.

https://router.vuejs.org/guide/advanced/navigation-guards.html

언급URL : https://stackoverflow.com/questions/64320068/vue-vuex-not-retrieving-proper-value-in-html