How do I use impersonation is a Vue.JS app?

I am working on an app with Vue.JS frontend, where a user logs in and is sent to a list of other users. Also on this page, there is another tab for a list of hospitals (once clicked, it will take you to a new page with list of hospitals).

One of the methods the logged in user can do when on the user page is to select one of the users to impersonate. Once they have confirmed they want to impersonate this user, the user page refreshes to show a grid of the list of users the impersonated user has access to see. While impersonating, they should also be able to go between tabs (users to hospitals), continuing the impersonation, so now the list of hospitals will render a list of the hospitals the impersonated user has access to see. In order to confirm that a user is being impersonated, there should be a textbox on the page showing that “{User} is now impersonated.”

I am able to do part 1, impersonating user on the user page, but once I click the hospitals, the data that is stored as ‘isUserImpersonated’ refreshes (once impersonation is created, then isUserImpersonated switches from false to true. When I refresh a page, isUserImpersonated will switch back to false). How can I keep the data to stay the same for each page, instead of refreshing once a new path is rendered (localhost:8080/users -> localhost:8080/hospitals?

I am trying to use EventBus after reviewing documentation, which seems to work, but the data won’t remain the same once you render a new page.

Has anyone used impersonation in a Vue.JS project? Do you have any tips or ideas on what I can do to make sure ‘isUserImpersonated’ remains the same if a user switches between pages?

When you refresh the page in an SPA all the current state will be lost. To account for this you have to use a form of temporary (cookies, localStorage, etc.) or permanent (database) storage. In your case, you could use temporary storage to hold the flag state.

That said, what’s stopping any user from impersonating another in your app? Usually this is done with something like a JWT - so when you start impersonating you can save that JWT to the users localStorage and pass it along with the requests. When the user is done, you invalidate the JWT and re-issue another for the users normal account.

In addition, hash / query on the URL, and probably the full URL with HistoryFallback, can be processed via vue-router, (or manually via new URL()). They can store some data, for example localhost:8080/users?isUserImpersonated=1.

1 Like

I often forget about query string params :grin: but also a decent option for retaining state on a refresh

Creating a JWT would have to be done in the backend, correct? Or is this something I can do in the frontend? I am relatively new to coding, and when I first learned about JWT it was in the backend.

Thank you for your help!

There are many methods to generate a JWT, but yes, commonly it’s generated on the backend when the user logs in. The token is returned as part of the auth endpoints response. The token is then used as part of the request headers for any auth guarded endpoints to verify the user before returning the response data.