Question

我目前正在练习VueJ，并制作了一些示例应用程序。我正在制作一个非常简单的应用程序，该应用程序基本上只是一个登录页面，用户可以在其中输入其凭据并访问其个人资料。但是，如果用户未登录，我想不出一种将视图限制在个人资料部分的方法（即，他们尝试通过手动将网址更改为/ profile来访问）

该应用程序是一个准系统，仅使用JS和引导程序。

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

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();
});

Answer 2

如果只有几个应保护的路由，则也可以使用beforeEnter参数。

routes.js
import {ifAuthenticated} from "../middleware/authentication";
{
    path: '/test',
    name: 'Test',
    component: Test,
    beforeEnter: ifAuthenticated
},

authentication.js
import store from '../../store'

export const ifAuthenticated = (to, from, next) => {
  store.dispatch('User/getUser')
      .then(() => {
        next()
      })
      .catch(() => {
        next({ name: 'Login', query: { redirect_to: to.fullPath } })
      })
}

使用vuex的示例。

如何使用VueJS将页面访问权限限制为未登录用户？

2 个答案: