文章/答案/技术大牛

发布

社区首页 >问答首页 >在对用户进行身份验证后，建议使用vue-router的方式是什么？

问在对用户进行身份验证后，建议使用vue-router的方式是什么？
EN

Stack Overflow用户

提问于 2019-10-14 15:50:47

回答 1查看 20关注 0票数 1

假设我刚刚用vue线索开始了一个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

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-10-14 16:00:10

在roter.js中，您可以使用vue-router hooks精确控制是否呈现组件

在下面的示例中，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来验证用户是否对此组件具有特定访问权限

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58372261

复制

相似问题

问在对用户进行身份验证后，建议使用vue-router的方式是什么？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在对用户进行身份验证后，建议使用vue-router的方式是什么？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在对用户进行身份验证后，建议使用vue-router的方式是什么？
EN