vue-router check menu auth

by plpot

HTML

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <div>
    <label for="checkbox">접근 권한 : {{checked}}</label>
  </div>

  <router-link to="/" v-on:toggle="toggle">Home</router-link>
  <router-link to="/menu/1">Menu1</router-link>
  <router-link to="/menu/2" v-if="checked">Menu2</router-link>
  <router-link to="/menu/3">Menu3</router-link>

  <router-view></router-view>
</div>

<template id="home">
  <div>
    <div>
    접근 권한 설정 :
    <input type="checkbox" id="checkbox" v-model="checked" v-on:click="toggle"> 
    </div>
    <div>
    <br>
    Menu 1 : 메뉴 진입시 권한 체크 후 권한 없을 시 home 으로 redirect 시킴
    </div>
    <div>
    <br>
    Menu 2 : 권한 없을 시 Menu 자체를 렌더링 하지 않음.
    </div>
    <div>
    <br>
    Menu 3 : 권한 없을 시 다른 화면으로 전환 시킴.
    <br>
    사용자 동의를 받은 경우에만 진입을 허용하는 경우에 활용 가능.
    </div>
    <div>
    <br>
    ※ 해당 소스는 오직 접근 권한 체크만 하는 샘플로 인증 체크는 별개로 체크해야함.
    </div>
  </div>
</template>

<template id="menu">
  <div>
    <div>
    Menu {{ $route.params.id }} 진입 성공!!
    </div>
  </div>
</template>

<template id="menu3">
  <div>
    <div>
    Menu 3 진입 성공!!
    </div>
  </div>
</template>

<template id="redirect">
  <div>
    <div>
    Menu 화면 접근 권한이 없어서 다른 화면으로 이동 되었습니다.
    </div>
  </div>
</template>

JavaScript

var data = {
  checked: true
}

const bus = new Vue()

const Home = {
  template: '#home',
  data: function() {
    return data
  },
  methods: {
    toggle: function() {
      bus.$emit('toggle', this.checked)
    }
  }
}

const Menu = {
  template: '#menu'
}

const Menu3 = {
  template: '#menu3',
  beforeCreate: function() {
    // 여기서 동의 여부 체크 API 호출
    if (!data.checked) {
    	router.push('/redirect')
    }
  }
}

const Redirect = {
  template: '#redirect'
}

const router = new VueRouter({
  routes: [{
      path: '/',
      component: Home
    },
    {
      path: '/menu/3',
      component: Menu3
    },
    {
      path: '/menu/:id',
      component: Menu,
      beforeEnter: (to, from, next) => {
        // 여기서 메뉴 접근 권한 체크 API 호출
        if (data.checked) {
          next()
        } else {
          alert("접근 권한 없음!")
          next('/')
        }
      }
    },
    {
      path: '/redirect',
      component: Redirect
    }
  ]
})

const app = new Vue({
  el: '#app',
  router,
  data: data,
  methods: {
    toggle: function() {
      this.checked = !this.checked
    }
  }
})

bus.$on('toggle', function(checked) {
  app.checked = checked
})