Каков рекомендуемый способ использования vue-router после аутентификации пользователей? - PullRequest
Новая
       6

Каков рекомендуемый способ использования vue-router после аутентификации пользователей?

1 голос
/ 14 октября 2019

Скажем, я только что запустил простой проект vue-nodejs-webpack с vue cli: 

vue create xxx

Как мне подключить стандартную маршрутизацию на стороне клиента, чтобы разрешить определенные маршруты на основе аутентификации? самым нелепым образом?

Мой App.vue будет выглядеть примерно так: 

<template>
  <v-app class="grey lighten-4">
    <Navbar />

    <v-content class="mx-4 mb-4">
      <router-view></router-view>
    </v-content>

  </v-app>
</template>

Принимая во внимание, что «Navbar» - это простое верхнее навигационное меню, а в представлении роутера просто отображается контент на основена текущем маршруте.

Route.js будет выглядеть так: 

import Vue from 'vue'
import Router from 'vue-router'
import Dashboard from './views/Dashboard.vue'
import Projects from './views/Projects.vue'
import Team from './views/Team.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'dashboard',
      component: Dashboard
    },
    {
      path: '/projects',
      name: 'projects',
      component: Projects
    },
    {
      path: '/team',
      name: 'team',
      component: Team
    }

  ]
})

1 Ответ

1 голос
/ 14 октября 2019

В roter.js вы можете использовать перехватчики vue-router для точного управления маршрутом, отображать компоненты или нет

Здесь в следующем примере isAunthenticates представляет собой отдельную функцию javascriptкоторый возвращает логическое значение, проверяя в бэкэнде, аутентифицирован ли пользователь или нет 

router.beforeEach((to, from, next) => {
  if (!isAuthenticated) next('/login')
  else next()
})

. В то же время вы также можете использовать предварительные перехваты, чтобы запретить пользователю вводить определенный маршрут 

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

Также вы можете использовать In-Component Guards на определенных компонентах, чтобы проверить, имеет ли пользователь определенный доступ к этому компоненту или нет

...