Как не иметь доступа вручную / войти после входа в систему - VueJS?

Я изучаю VueJS на курсе Udemy. В модуле про аутентификацию инструктор не сделал весь процесс, поэтому мне пришлось пробовать самому 2 дня, но у меня получилось на 90%.

Серверная часть находится на базе firebase, поэтому после входа в систему с правильными данными я получаю токен, который отправляю в локальное хранилище.

С кодом, который я делаю, вы не можете видеть панель инструментов, если вы не авторизованы (даже если вы пробуете маршрут вручную), но что мне не нравится, так это то, что вы можете увидеть страницу входа после аутентификации (если вы вводите /signin).

Эта последняя часть не является нормальной. Поэтому, если вы прошли аутентификацию, при попытке вручную перейти к /signin вы можете это сделать.

В файле router.js:

const routes = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: WelcomePage },
    { path: '/signup', component: SignupPage },
    { path: '/signin', component: SigninPage },
    { path: '/dashboard', component: DashboardPage}
  ]
});

routes.beforeEach((to, from, next) => {
  // redirect to login page if not logged in and trying to access a restricted page
  const publicPages = ['/signin', '/signup'];
  const authRequired = !publicPages.includes(to.path);
  const loggedIn = localStorage.getItem('token');
  console.log(loggedIn);
  if (authRequired && !loggedIn) {
    return next('/signin');
  }
  next();
});

И в store.js внутри действия входа в систему:

if (localStorage.getItem('token')) {
  router.replace("/dashboard");
}

Любая идея, что делать с маршрутами /login и /register после входа в систему, чтобы не видеть их, даже если вы вручную пробуете эти маршруты?

Если пользователь попробует вручную /signin или /signup, я хочу, чтобы его перенаправили на /dashboard.

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
1
0
2 330
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы можете добавить защиту для каждого маршрута (https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard), чтобы логика выполнялась только при совпадении /signin и /signup, но если вы хотите, чтобы она оставалась в цикле, который работает по всем маршрутам, вы на правильном пути — вы просто нужно перевернуть вашу логику.

Итак, что вы хотите сделать, это добавить еще один оператор if, проверяющий, верно ли isLoggedIn, и что вы пытаетесь получить доступ к общедоступной странице, и в этом случае перенаправить пользователя на маршрут /dashboard.

if (!authRequired && loggedIn) {
  next('/dashboard');
  return;
}

Это мне не помогает. Чего я хочу, так это когда я нахожусь http://localhost:8080/dashboard и я вошел в систему, если я попытаюсь вручную http://localhost:8080/signin Я хочу, чтобы меня мгновенно перенаправили на /dashboard, потому что я вошел в систему и это не нормально иметь доступ к этой странице, когда вы вошли в систему.

dragon 22.05.2019 15:02

О, я понимаю, что вы ищете. Я обновил свой ответ.

sundeqvist 22.05.2019 15:15

Ваш код хорош, я перенаправляюсь на /dashboard после входа в систему, я не вижу страницу входа, если я набираю /login, но теперь, если я выхожу из системы и вручную захожу в /dashboard, я могу ее увидеть. Я пробовал что-то с beforeEnter, но не работает: { path: '/dashboard', component: DashboardPage, beforeEnter: (to, from, next) => { if (store.state.token) { next(); } else { next('/signin'); } } }

dragon 22.05.2019 16:15
Ответ принят как подходящий

В моем приложении vue я просто использую метод router.beforeEach с метаданными плюс состояние моего токена, который я извлекаю из своего магазина.

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
      var token = store.getters.loggedIn;
      if (!token ) {
        next({
          path: '/login',
        })
      } else {
        next()
      }
    }else if (to.matched.some(record => record.meta.requiresVisitor)) {
      if (token) {
        next({
          path: '/',
        })
      } else {
        next()
      }
    }
})

Он проверяет каждый раз, когда маршрут меняется.

Мета requiresVisitor — это то, что я поместил в свой объект маршрутизатора.

{
    // this is can only be viewed if not logged in.
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "login" */ './views/Login.vue'),
    props: true,
    meta: {
      requiresVisitor: true,
      layout: "landing",
    },
  },
{
  // this can only be viewed if logged in.
  path: '/',
  name: 'dashboard',
  component: () => import(/* webpackChunkName: "dashboard" */ './views/Dashboard.vue'),
  props: true,
  meta: {
    requiresAuth: true,
    layout: "default",
   },
  },

вы можете прочитать больше о защите маршрута Здесь

Эти методы обычно используются в точке входа в приложение main.js или в вашем router.js файле.

Я попробовал ваш код, но я все еще могу получить доступ к странице /signin после того, как я вошел в систему и набрал вручную /signin.

dragon 22.05.2019 16:23

Вы можете console.log(token) в методе router.beforeEach увидеть, что проверяется в условии if(token)? также вы добавили метаданные в свой маршрут?

TJ Weems 22.05.2019 16:47

Куда вы рекомендуете поместить этот метод router.beforeEach: в main.js или в router.js?

dragon 22.05.2019 22:13

@dragon, я бы порекомендовал ваш файл main.js, потому что он будет проверять каждый раз при изменении маршрута, а также будет следить за тем, чтобы пользователи не могли перейти к представлениям без входа в систему. также для представлений, которые можно просматривать только во время входа в систему, должны быть метаданные под названием requiresAuth.

TJ Weems 22.05.2019 22:35

@TJWeems, тогда в чем разница между requireAuth и requireVisitor?

Daniel Yang 02.04.2021 04:58

Best example of redirection using beforeEach

const routes = [
      {
        path: "/",
        name: "login",
        component: Login,
        meta:{requiresVisitor: true},
      },
      {
        path: "/dashboard",
        name: "dashboard",
        component: Dashboard,
        meta:{requiresVisitor: false},
      }];

    const router = new VueRouter({
      mode: "history",
      base: process.env.BASE_URL,
      routes
    });

export default router;

//Check the user is loged in If yes then move to next url.If not loged in so move in else and check the meta and move into next other wise is redirect my index url

router.beforeEach((to, from, next) => {
  const isLogged = JSON.parse(localStorage.getItem('username'));
    if (isLogged) next()
    else{
      if(to.meta.requiresVisitor) next()
      else next('/')
    }
})

Другие вопросы по теме