时间戳

首页 > 解决方案 > 验证用户后使用 vue-router 的推荐方式是什么？

vue-router - 验证用户后使用 vue-router 的推荐方式是什么？

问题描述

假设我刚刚使用 vue cli 启动了一个 vue-nodejs-webpack 简单项目：

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>

而“导航栏”是一个简单的顶部导航菜单，路由器视图只是根据当前路由显示内容。

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
    }

  ]
})

标签： vue-router

解决方案

在 roter.js 中，你可以使用vue-router 钩子来精确控制路由是否渲染组件

在下面的示例中，isAunthenticates 是一个单独的 javascript 函数，它返回布尔值，通过在后端检查用户是否经过身份验证

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

同时你也可以使用pre router hooks来防止用户进入特定路由

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

您还可以在特定组件上使用In-Component Guards来验证用户是否具有对该组件的特定访问权限

推荐阅读