I'm building a SPA(Single Page Application) with Vue.js now,
and there will be some admin pages which authorized person can access to it.
And the Vue frontend server will communicate with backend Express.js server with REST APIs.
In this case, I thought that SPA is the concept that loaded at once and react with it, not like traditional MPAs such as apache, which run the code on the server and toss it with HTML, so the admin pages will be in source code even though the informations are authorized by Express.js with ajax(axios), am I understand right?
So even though I use Vue-router beforeEach authorization, someone can see the frames of admin pages, right?
If so, is there any better idea to block access for them?
All the code of the SPA doesn't need to be loaded as one piece at once. You can use Async Components to split the code into multiple chunks loaded dynamically at runtime only when needed. This is especially useful in your case as the code for the Admin part doesn't need to be downloaded/parsed/executed by non-admin users (which is probably majority) - see Lazy Loading Routes
On top of that your Express server app should authorize every server call anyway. If unauthorized user somehow manage to execute and display the Admin part, it will be useless for him if the server doesn't return any "admin only" data to display or allow any admin only operations to be executed on server side...