I've studied the code for VueRouter and read several other examples that use guards and prechecks to perform authentication (either by a cookie or session data token) to block certain routes unless the user has permission.

I don't understand how this is safe? The VueRouter example blocks the dashboard page, but I can literally view the so-called "blocked" page in the browser debug console, and then edit the JavaScript in the source panel to bypass the authorization by deleting the check in the requireAuth function and replace with 'next()'.

I'm clearly missing something, but if the content and javascript can be viwed/edited in browser, how is this a valid method of authorizing parts of your website?

CodePudding user response：

Securing your app should be done in backend since you have full control of that machine. VueRouter, as you clearly said, is typically used for showing/hiding UI elements depending on authentication and authorization. You always must assume that anyone could read and modify your frontend in their local machines.

To be clear, It doesn't matter whether you're using Vue, React or any other frontend framework, security must be applied in the backend.