Как ограничить доступ к странице для незарегистрированных пользователей с VueJS?

Question

В настоящее время я практикую VueJ и создаю несколько примеров приложений.Я делаю очень простое приложение, которое представляет собой просто страницу входа в систему, где пользователи размещают свои учетные данные и получают доступ к своему профилю.Однако я не могу придумать способ ограничить просмотр разделом профиля, если пользователь не вошел в систему (то есть пытается получить доступ, вручную изменив URL на / profile)

Приложение довольно скромно, он просто использует JS и загрузчик.

Есть ли способ немедленно перенаправить пользователей обратно на экран входа в систему, если они не вошли в систему, и попытаться получить доступ к странице профиля?

Answer 1

Вы также можете использовать beforeEnter param, если у вас есть только несколько маршрутов, которые должны быть защищены.

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.

Answer 2

Вы можете использовать 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();
});