javascript - 如何使用 VueJS 限制未登录用户的页面访问？

Question

我目前正在练习 VueJs 并制作一些示例应用程序。我正在制作一个非常简单的应用程序，它基本上只是一个登录页面，用户可以在其中输入他们的凭据并访问他们的个人资料。但是，如果用户未登录(即他们尝试通过手动将 url 更改为/profile 来访问)，我想不出一种方法来限制对配置文件部分的查看

该应用程序非常准系统，它仅使用 JS 和 Bootstrap 。

如果用户未登录并尝试访问个人资料页面，是否有办法立即将用户重定向回登录屏幕？

Answer 1

您可以使用 https://router.vuejs.org/guide/advanced/navigation-guards.html beforeEach 检查当前用户是否登录并执行您需要执行的操作:)。

你的路线:

...
{
    path:'/profile',
    meta:{guest:false},
    component:ProfileComponent
},
...

例子:

router.beforeEach((to, from, next) => {

    if (!to.meta.guest) {
        // check if use already logged 
        // if true then go to home
             return next({path:'/'}); // '/' is home page for example
        // else then continue to next()
    }

    return next();
});