我有2个页面，一个是login.html,一个是home.html,要登录了以后才可以访问home.html,请问要在一个vue3工程里去实现这个，该怎么做？

[liuyi]

就是想尽量实现权限安全问题，如果是纯单页面的话，通过一层层的在编译好的js里总是能找到登录后才能访问的地址。

[edison1105]

在路由的 beforeEach 中校验是否已登录，如果未登录，重定向到登录页。

[liuyi]

谢谢回复哦！我知道这样操作，我的意思是 我想将登录页做成另外一个单独的页面（实现物理上的隔离），但是希望在一个vite工程里。

[ubbcou]

登录页是单独的页面并且在同一个vite项目中，那么你可能需要的是多页面应用模式

[liuyi]

谢谢！这个好像是我需要的；现在就去尝试

[mbokil]

Ideally you want to have the protection on the backend. So if you are using the Node server you would have public access to login.html. index.html is a protected route in the Node server. You would use something like a JWT verifier to allow access to your app page. If the JWT token is missing then you direct the user to the login page. In the UI/client you can then protect the Vue routes using a route guard pattern that validates the token before gaining entry to the route. Okta has a good Oath2 module that works with Vue 3 that I suggest. https://github.com/okta/okta-vue

[liuyi]

@mbokil You are right. I will use some middleware and router ruler(server side) to keep web backend can only visit by logged users.
That's the reason i don't use SPA with backend.