Button appearing to unauthorized users.

[austin-owensby]

I noticed a weird bug where a user could view a button that they were not authorized to view.

The setup for reproducing the bug was very particular so in addition to describing it here I've made a repo based off of your blog example that showcases the bug along side reproduction steps.

In order to get this to work I had to have 3 buttons, where the outer buttons were authorized.

      <button v-role:admin @click="showDialogA" title="Button 1 - Admin Only">Button 1 - Admin Only</button>
      <button @click="showDialogB" title="Button 2">Button 2</button>
      <button v-role:admin @click="showDialogC" title="Button 3 - Admin Only">Button 3 - Admin Only</button>

Button order does matter! If the button without authorization is not in the center, the bug does not reproduce.

Each button also had to trigger a component to be rendered. Removing these components stopped the bug from showing up.

When clicking the unauthorized center button, authorized button 1 appears, but without content.
I know it is button 1 because I added a title attribute and clicking it renders the button's authorized component.
Closing the center button's dialog adds a 2nd button 1.
Opening and closing the center button's dialog generates multiple button 1s.

Edit:

I fiddled with the code some and noticed that it is creating a comment for button 1 in the commentNode function, but is still rendering button 1 anyways.

HTML before signing in

<!--Button 1 - Admin Only-->
<button title="Button 2">Button 2</button>
<!--Button 3 - Admin Only-->

HTML after signing in as unauthorized user

<button title="Button 1 - Admin Only"> </button>
<button title="Button 2">Button 2</button>
<!--Button 3 - Admin Only-->
<!--Button 1 - Admin Only-->

Also button 1's text is getting set to an empty string by vnode.text = ' ' in the commentNode function.

The 2 VNodes objects (For buttons 1 and 3) being passed into the function look the same with the expcection being their children.

Button 1's child VNode has IsRootInserted set to true and elm to undefined
Button 3's child VNode has IsRootInserted set to false and elm to the button's text

Lastly in the commentNode function, for button 1 el has a parentNode while button 3 does not.

Maybe the issue is in the commentNode function? It's almost like for button 1 it's modifying the button's text and for button 3 it's modifying the button. But only when logged in as an unauthorized user. The function works fine if logged out and Button 1 and 3 have similiar VNodes.

I might do some more research later on if I have time.