案例 -- vue自定义指令 实现 按钮权限

 

<div id="app">
  <button v-auth>查看员工薪资</button>
</div>

<script>
  // 这在项目中是通过登录得到的
  // sessionStorage.setItem('username', 'lisi')
  Vue.directive('auth', {
    inserted(el) {
      // console.log(new URLSearchParams(location.search).get('username'))
      let url = new URL(location.href)
      let username = url.searchParams.get('username')

      if (sessionStorage.getItem('username') != username) {
        el.parentNode.removeChild(el)
      }
    }
  })

  const vm = new Vue({
    el: '#app',
    data: {}
  })
</script>