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日

相关文章

  • 文件预览PDF.js使用技巧示例总结

    文件预览PDF.js使用技巧示例总结 简介 PDF.js是一个用于在Web平台上显示PDF文档的JavaScript库,其使用Canvas技术实现渲染,使得Web端的PDF浏览成为可能。本文将简要介绍PDF.js的使用技巧,并提供两个示例说明。 安装PDF.js 从GitHub上下载PDF.js源代码,并解压到本地目录 在HTML文件中添加以下标签,引入库文…

    JavaScript 2023年5月27日
    00
  • JS数组方法shift()、unshift()用法实例分析

    JS数组方法shift()和unshift()是数组操作中非常常用的方法,两个方法都可以用于向数组的开头添加或删除元素,下面详细讲解这两个方法的用法及实例分析。 shift() 方法的用法及实例分析 shift()方法用于删除数组的第一个元素,并返回被删除的元素。 语法: array.shift() 参数说明: shift()方法不需要任何参数。 返回值: …

    JavaScript 2023年5月27日
    00
  • Javascript Math pow() 方法

    JavaScript中的Math.pow()方法是用于计算一个数的指定次幂的函数。以下是关于Math.pow()方法的完整攻略,包含两个示例。 JavaScript Math对象的pow方法 JavaScript Math的pow()方法用于计算一个数的指定次幂。下面是pow()方法的语法: Math.pow(base, exponent) 其中,base表…

    JavaScript 2023年5月11日
    00
  • sso跨域写cookie的一段js脚本(推荐)

    来详细讲解一下“sso跨域写cookie的一段js脚本(推荐)”的完整攻略。 什么是SSO? SSO(Single Sign-On,单点登录),指在多个应用系统中,用户只需登录一次就可以访问所有相互信任的应用系统。 什么是跨域? 跨域是指浏览器禁止通过客户端脚本语言发起对不同源(协议、域名、端口号)的请求。 为什么要跨域写Cookie? 由于浏览器的同源策略…

    JavaScript 2023年6月11日
    00
  • JS中节流和防抖函数的实现及区别示例

    JS中的节流和防抖函数是常见的性能优化方案,它们可以有效减少大量事件触发时造成的性能浪费。接下来我将详细讲解它们的实现方法及区别,并提供两个示例说明。 一、防抖函数 防抖函数是指在事件触发n秒后,才会执行回调函数,如果在n秒内又触发了该事件,则重新计算时间。这个操作就像是“弹簧被压下去后在n秒后才能弹起来”。 防抖函数的实现方法如下: function de…

    JavaScript 2023年6月10日
    00
  • 关于JavaScript中的关联数组分析

    作为网站作者,我们需要对于网站上所提供的技术知识进行深入解析和详细讲解,使得读者们能够更好地掌握和理解相关知识点。在这里,我们将详细讲解JavaScript中的关联数组。 什么是关联数组 关联数组是指可以通过字符串类型的下标来访问的数组类型。在JavaScript中,我们也可以通过这种方式来定义一个数组,例如: let person = { name: ‘A…

    JavaScript 2023年5月27日
    00
  • js 数组随机字符串(广告不重复)

    首先需要了解“数组”和“随机数”的概念。 数组 数组是一组按照顺序排列的值的集合。值可以是任何数据类型,如字符串、数字、对象等。在 JavaScript 中,数组用方括号表示 [],并用逗号分隔其中的值。 随机数 随机数是指没有规律可循的随机输出的数字或序列。在 JavaScript 中,可以通过 Math.random() 方法生成一个介于 0 (包括)和…

    JavaScript 2023年5月28日
    00
  • JavaScript MutationObserver实例讲解

    下面是关于“JavaScript MutationObserver实例讲解”的详细攻略。 什么是MutationObserver MutationObserver是在现代浏览器中新增的监视DOM元素变化的API。它提供了一种能够在DOM对象发生变化时,异步被通知的能力。 如何使用MutationObserver MutationObserver是一个构造函数…

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