vue3使用vue-router及路由权限拦截方式

让我为你讲解一下“vue3使用vue-router及路由权限拦截方式”的完整攻略。

1. 安装和配置vue-router

首先需要在项目中安装vue-router。

npm install vue-router

接下来在main.js中配置路由,并将其挂载到Vue实例上:

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]
})

createApp(App)
  .use(router)
  .mount('#app')

2. 路由守卫

路由守卫可以用来拦截导航,从而控制用户访问页面的权限。它主要有3种类型:

  1. 全局守卫
  2. 路由独享守卫
  3. 组件内守卫

在这里,我们将会使用全局守卫来实现路由权限拦截功能。

// 定义路由
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/profile',
      name: 'Profile',
      component: Profile,
      meta: { requiresAuth: true } // 添加meta元数据
    }
  ]
})

// 定义路由守卫
router.beforeEach((to, from, next) => {
  // 判断路由是否需要登录权限
  if (to.meta.requiresAuth) {
    // 判断是否已经登录
    if (isLogin()) {
      next()
    } else {
      next({
        path: '/',
        query: { redirect: to.fullPath }
      })
    }
  } else {
    next()
  }
})

以上代码中,我们给Profile路由添加了一个meta元数据,用来标识该路由需要登录权限。而在路由守卫中,则先判断了当前路由是否需要登录,再判断用户是否已经登录,如果未登录则跳转到登录页面。

3. 示例说明

下面,我们来看看如何使用上述方法来实现路由权限控制。

示例1:登录页面

假设我们的系统有一个登录页面,当用户输入用户名和密码后,如果验证通过,则进入系统功能主页。

// 在登录页面中添加以下逻辑
import { useStore } from 'vuex'

export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // 真正的登录逻辑
      // todo...

      const store = useStore()
      store.commit('login', currentUser) // 将用户信息保存在Vuex中

      if (router.currentRoute.value.query.redirect) {
        this.$router.replace(router.currentRoute.value.query.redirect)
      } else {
        this.$router.push('/')
      }
    }
  }
}

在用户登录成功后,我们将会把用户信息存储在Vuex中,并根据路由参数中的redirect来判断用户需要跳转到哪个页面。

示例2:功能页面

假设我们系统中有一些需要登录才能访问的功能页面,如个人资料页,只有登录后的用户才能访问。

// 在功能页面中添加以下路由表达式
const routes = [
  {
    path: '/profile',
    component: Profile,
    meta: { requiresAuth: true }
  }
]

在路由表达式中,给Profile路由添加requiresAuth=true的元信息,表示该路由需要登录权限。

// 在功能页面中添加以下逻辑代码
import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'Profile',

  setup() {
    const store = useStore()

    const currentUser = computed(() => store.getters.currentUser)

    return {
      currentUser
    }
  }
}

在功能页面中,我们从Vuex中获取当前用户信息,并实现了一个简单的computed属性,来判断当前用户是否已经登录。如果用户未登录,则会被路由守卫拦截并跳转到登录页面。

总结

通过以上方法实现了路由权限控制,在用户访问需要登录的页面时,需要经过路由守卫的验证。在Vue3中,可以使用全局守卫来实现路由权限拦截功能,同时把用户信息保存在Vuex中,在需要时从Vuex中读取用户信息。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue3使用vue-router及路由权限拦截方式 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • Angularjs 创建可复用组件实例代码

    AngularJS 是一个广泛使用的前端框架,其中最重要的概念之一是组件。组件是 AngularJS 中的基本构建块之一,可以帮助我们实现代码的可复用性、可维护性和可测试性。在本文中,我们将讨论在 AngularJS 中如何创建可复用组件实例代码的完整攻略。 创建可复用组件实例的准备工作 在创建可复用组件实例之前,我们需要完成以下准备工作: 确定组件的数据和…

    JavaScript 2023年6月11日
    00
  • javascript 小型动画组件与实现代码

    下面是关于“JavaScript 小型动画组件与实现代码”的完整攻略: 理解动画组件 动画是 Web 开发中不可或缺的一个环节,有助于提高用户体验。我们可以使用 JavaScript 实现各种动画效果,但如果每次需要重新编写代码来实现动画,那就会显得十分冗长和麻烦。因此,将一些通用的动画效果进行封装,形成一个可重复使用的动画组件,就成为了一种很好的解决方案。…

    JavaScript 2023年5月28日
    00
  • js中的如何定位固定层的位置

    要定位固定层(也称为fixed元素)的位置,可以使用JavaScript中的两个重要属性:offsetTop和offsetLeft。这两个属性可以帮助我们知道一个元素相对于其父元素的位置。 1. 使用offsetTop和offsetLeft属性 offsetTop和offsetLeft属性是DOM属性,它们分别返回元素相对于其父元素顶部和左侧边缘的像素距离。…

    JavaScript 2023年6月11日
    00
  • javascript设计模式之Adapter模式【适配器模式】实现方法示例

    下面我会详细讲解“Javascript设计模式之Adapter模式【适配器模式】实现方法示例”的完整攻略,包括如何使用适配器模式以及示例的具体实现。 什么是适配器模式? 适配器模式是一种行为型设计模式,用于将一个类的接口转换成另一个客户端所期望的接口。通俗来讲,就是使得一个类能够应对多种不同的接口。 适配器模式的应用场景 在实际的编程中,适配器模式的应用场景…

    JavaScript 2023年6月10日
    00
  • JavaScript实现将UPC转换成ISBN的方法

    要将UPC转换成ISBN,我们需要用到一些JavaScript知识。下面是的完整攻略,包含两条示例: 准备工作 要实现将UPC转换成ISBN,我们需要用到一个叫作EAN-13的标准。这个标准将UPC视为EAN-13的一个子集,因此我们可以通过将UPC的前缀添加到一个特定的EAN-13前缀来得到相应的ISBN。 在开始编写代码之前,我们需要确定一个用于转换UP…

    JavaScript 2023年5月19日
    00
  • JS中的THIS和WINDOW.EVENT.SRCELEMENT详解

    JS中的this关键字 什么是this? 在JavaScript中,this是一个特殊的关键字,它在函数内部起着重要的作用,表明当前代码执行的上下文。当代码执行时,this的值会根据代码的上下文而动态的改变。 this指向的值 this关键字指向的是当前代码的“拥有者”或“执行者”,它的值会因为当前代码所在的位置而变化。下面是几个示例: this指向wind…

    JavaScript 2023年6月10日
    00
  • electron 安装,调试,打包的具体使用

    接下来我将详细讲解如何使用Electron进行安装、调试和打包。整个过程分为如下几个步骤。 安装 Electron可以通过npm进行安装,以下是安装命令: npm install electron –save-dev 其中,–save-dev选项会将Electron保存为开发依赖。如果你想在全局范围内使用Electron,则需要使用以下命令进行全局安装:…

    JavaScript 2023年6月11日
    00
  • 正则表达式的高级技巧分享

    正则表达式的高级技巧分享 1. 回溯引用 1.1 什么是回溯引用 回溯引用,也叫做后向引用,它允许使用已经匹配的子表达式来匹配一个字符串的其他部分。引用的数量是通过一个数字来实现的,该数字表示需要引用的子表达式的数量。 1.2 示例说明 假设我们有一个字符串,它包含多个单词之间用逗号隔开,如下所示: Tom,Lily,Cindy,Bob,Adam 假设我们要…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部