사용자 역할에 따라 1개의 루트에 대해 다른 뷰를 로드하는 방법이 있습니까?

사용자 역할에 따라 1개의 루트에 대해 다른 뷰를 로드하는 방법이 있습니까?

역할에 따라 다른 보기에 대해 기본 페이지 경로 '/'을(를) 사용하려는 경우 구현이 있습니까?예를 들어, 권한이 있는 사용자라면MainAuth게스트의 경우는,MainGuest설명에 도움이 되는 몇 가지 코드가 있습니다.

const routes = [
  {
    path: '/',
    name: 'main_auth',
    component: MainAuth,
    meta: {
      requiresAuth: true
    }
  },
  {
    path: '/',
    name: 'main_guest',
    component: MainGuest,
    meta: {
      requiresGuest: true
    }
  }
]

이 예에서는 게스트 또는 사용자에 관계없이 선언한 첫 번째 경로가 로드됩니다.좀 더 구체적으로 말하면, 메인 경로 '/'에 로그인/등록 모듈이 있으며 로그인 후 동일한 경로 '/'에 인증된 사용자 페이지를 로드하려고 합니다.

다음은 3가지 옵션입니다.

1. 심플한 계산 뷰

단일 루트에 임의의 수의 조건부 뷰를 표시할 수 있도록 하려면 계산된 컴포넌트를 사용합니다.

뷰 등록:

import Vue from 'vue'

import ViewDefault from '/views/Default.vue'
Vue.component('view-default', ViewDefault )

import ViewAuth from '/views/Auth.vue'
Vue.component('view-auth', ViewAuth )

import ViewGuest from '/views/Guest.vue'
Vue.component('view-guest', ViewGuest)

경로:

  {
    path: '/',
    name: 'index',
    component: ViewDefault
  },

보다Default.vue

<template>
  <component :is="view"></component>
</template>

<script>

export default {

  name: 'view-default',

  computed: {

   view() {
     return this.isAuthenticated ? 'view-auth' : 'view-guest'
   }  

  }

}

</script>

원하는 수의 조건부 체크를 생성할 수 있습니다.view().

---

2. 조건부 명명 뷰(개념은 시행되지 않음)

명명된 뷰를 사용해 실험해 보는 것을 고려해 보겠습니다.사용자 버전과 게스트 버전을 사용하여 여러 경로를 이중으로 볼 수 있다고 생각합니다.아직 시도해 본 것은 아닙니다.

https://router.vuejs.org/guide/essentials/named-views.html

<template>

  <div>

    <template v-if="isAuthenticated">
      <router-view name="authed"/>
    </template>
  
    <template v-else>
      <router-view/>
    </template>

  </div>

</template>

Router

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: MainGuest,
        authed: MainAuth,
      }
    }
  ]
})

---

3. 계산된 레이아웃

하지만...개인적으로 I/O 차단 레이아웃을 사용하고 있습니다.layout.

다음을 포함하는 최종 레이아웃이 계산되기 전에 조건에 따라 표시되는 레이아웃을 제어하는 다양한 애플리케이션 상태를 확인합니다.<router-view>.

라우터 패스로 커스텀레이아웃을 지정하도록 하겠습니다meta데이터, 대체 레이아웃 설정, 그렇지 않으면 기본 레이아웃으로 돌아갑니다.

Router

  {
    name: 'index',
    path: '/',
    meta: {
      title: 'Welcome',
      guard: 'auth'
    },
    component: import('@/views/welcome')
  },

  {
    name: 'settings',
    path: '/settings',
    meta: {
      title: 'Account Settings',
      layout: 'settings',
      guard: 'auth'
    },
    component:  import('@/views/account-settings')
  }

App.vue

<template>

  <div id="app" v-cloak :class="$root.layout">

    <transition name="component-fade" mode="out-in">
      <component :is="$root.layout"/>
    </transition>

  </div>

</template>

main.js

import Vue from 'vue'
import router from './router'
import store from './store'
import '@/views/layouts'
import App from './App'


// Use Vuex to store states, `axios` calls and response `interceptors` are used to `commit` computed mapped state conditions globally.

import { mapState, mapGetters } from 'vuex'

Vue.mixin({

  computed: {

    ...mapState(['user', 'isAuthenticating', 'isOffline']),

    ...mapGetters(['isAuthenticated']),

  }

})

new Vue({

  el: '#app'
  render: h => h(App),
  store,
  router,

  computed: {

    layout () { // could move this to vuex and access via mapGetters...

      if (this.isOffline) {
        return 'layout-offline'
      }

      if (this.isAuthenticating) {
        return 'layout-authenticating'
      }

      if (this.$route.meta.hasOwnProperty('guard')) {

        if(this.$route.meta.guard === 'auth' && !this.isAuthenticated) {
          return 'layout-login'
        }

      }

      // If current route has a preferred layout use it else fallback to `layout-default`
      let layout = this.$route.meta.layout || 'default'

      return `layout-${layout}`
    }

  },

})

views/layouts/index.js

import Vue from 'vue'

import LayoutOffline from './layout-offline')
import LayoutAuthenticating from './layout-authenticating')
import LayoutLogin from './layout-login')

import LayoutDefault from './layout-default')
import LayoutSettings from './layout-settings')

Vue.component('layout-offline', LayoutOffline)
Vue.component('layout-authenticating', LayoutAuthenticating)
Vue.component('layout-login', LayoutLogin)

Vue.component('layout-default', LayoutDefault)
Vue.component('layout-settings', Layoutsettings)

오직.layout-default또는 커스텀 레이아웃을 지정하는 라우터 경로에는<router-view>머리글, 바닥글, 사이드바 등과 함께...

이것을 이름 보기와 혼합하여 다른 계산 레이아웃을 표시할 수 있습니다.router-view같은 이유로path.

하나의 경로만 사용해야 하므로 기본 경로를 사용하여 구성 요소 자체에서 작업을 수행할 수 있습니다.루트:

const routes = [
  {
    path: '/',
    name: 'main',
    component: Main,
  }
]

Main보기 컴포넌트:

<template>
  <div>
    <Auth v-if="!loggedIn" />
    <MainContent v-else />
  </div>
</template>

Auth컴포넌트:

<template>
  <div>
    <Login v-if="showLogin" />
    <Register v-else />
  </div>
</template>

이를 통해 사용자가 로그인하고 있는지 여부를 확인합니다.Main컴포넌트를 표시하여Auth컴포넌트 또는 메인 콘텐츠.

그리고 나서Auth컴포넌트, 사용자가 다른 컴포넌트 간에 전환할 수 있는 토글을 사용합니다.Login그리고.Register요소.

beforeEach 메서드를 사용하여 사용자를 다른 루트로 리다이렉트할 수 있습니다.

예:

router.beforeEach((to, from, next) => {
  // Determine if the route requires Authentication
  const requiresAuth = to.matched.some(x => x.meta.requiresAuth);
  const user = auth.getUser();

  // If it does and they are not logged in, send the user to "/login"
  if (requiresAuth && !user) {
    next("/login");
  } else {
    // Else let them go to their next destination
    next();
  }
});

언급URL : https://stackoverflow.com/questions/60960002/is-there-a-way-to-load-different-views-for-one-route-depending-on-user-role