In the app I'm working on it's a fairly big codebase and components/pages are sometimes based on user roles. Admins will be able to see certain buttons or sections while regular users are not.

I need to modify a lot of the existing pages/components to accommodate a new role that's being added, which is view-only-admin.

This role will only be able to see everything including calendars, tasks, etc. but they are not allowed to make any sort of updates.

It would be a tremendous amount of work to go through the template of each component and file and look for v-if admin and also add a view-only-admin as well as make every single button or submit/click method behave differently for a view-only-admin role.

What would be the best way to handle this for the entire app? Re-writing and modifying v-if and submit methods seem like a bad use of time.

I've only been working with Vue/Nuxt for a few months, but I have read Mixins are pieces of code that you can reuse.

Would it be possible to write a mixin so that if the role is "view-only-admin" and there's an action that is a put/Post call, then they are not able to perform those API calls and presented with an error message?

I'm not sure how to go about properly implementing this feature. If I am able to stop all PUT/POST calls using a mixin, it would just redirect to a 404 right?

Thoughts?

CodePudding user response：

If you are using axios for POST/PUT methods, then you should definitely check Interceptors.

But if you add only an interceptors without UI updates - your users may be confused why some buttons exist but doesn't work as expected.