首页 > 其他分享 >Vue中页面访问拦截

Vue中页面访问拦截

时间:2023-11-24 14:11:36浏览次数:30  
标签:Vue next 守卫 token 放行 拦截 路由 页面

页面访问拦截

目标:基于全局前置守卫,进行页面访问拦截处理
说明:对于一个项目来说,大部分的页面,游客都可以直接访问,如遇到需要登录才能进行的操作,提示并跳转到登录,但是:对于支付页,订单页等,必须是登录的用户才能访问,游客不能进入该页面,需要做拦截处理

路由导航守卫-全局前置守卫

  • 所有的路由一旦被匹配到,都会先经过全局前置守卫
  • 只有全局前置守卫放行,才会真正解析渲染组件,才能看到页面内容

访问权限页面时,拦截或放行的关键点:用户是否有登录权证token

官网vue3:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
官网vue2:https://v3.router.vuejs.org/zh/guide/advanced/navigation-guards.html

语法:

router.beforeEach((to,from,next)=>{
   // 1.to   往哪里去, 到哪去的路由信息对象
   // 2.from 从哪里来,从哪里来的路由信息对象
   // 3.next() 是否放行
   //   3.1 如果next()调用,就是放行
   //   3.2 next(路径) 拦截到某个路径页面
})

步骤:

  • 跳转路由
  • 全局前置守卫
  • 是否访问权限页面
    • 非权限页面 直接放行
    • 是权限页面 判断是否有token,有就放行 ,没有就拦截到登录

代码:

// 定义一个数组,专门用户存放所有权限访问的页面
const authUrls = ['/pay', '/myorder']
// 全局前置导航守卫
// 所有的路由在真正访问到之前,都会先经过全局前置守卫
// 只有全局前置守卫放行了,才会到达对应的页面
router.beforeEach((to, from, next) => {
  // 1.to   往哪里去, 到哪去的路由信息对象
  // 2.from 从哪里来,从哪里来的路由信息对象
  // 3.next() 是否放行
  //   3.1 如果next()调用,就是放行
  //   3.2 next(路径) 拦截到某个路径页面

  // 看 to.path 是否在authUrls 中出现过
  if (!authUrls.includes(to.path)) {
    // 非权限页面,直接放行
    next()
  }
  // 这里是权限页面,需要判断token
  // 从vuex中获取 用户的token信息
  const token = store.getters.token
  if (token === null || token === '') {
    next('/login')
  }
  next()
})

标签:Vue,next,守卫,token,放行,拦截,路由,页面
From: https://www.cnblogs.com/zgf123/p/17853610.html

相关文章

  • 直播平台搭建,切换页面 滚动条默认最顶端
    直播平台搭建,切换页面滚动条默认最顶端router.afterEach((to,from,next)=>{ window.scrollTo(0,0);});​以上就是直播平台搭建,切换页面滚动条默认最顶端,更多内容欢迎关注之后的文章 ......
  • 微信小程序--页面间传递数据的方式
    一、设置为全局变量,在另一个页面再获取这个变量 二、通过wx.navigateTo()的url传值 三、通过wx.navigateTo()的success建立一条数据通道传递数据的页面data:{data1:"第一个页面的值"},//在wxml页面设置一个按钮,并绑定事件dddddd:function(){va......
  • Vue项目demo
    企业级项目目录api接口模块:发送ajax请求的接口模块utils工具模块:自己封装的一些工具方法模块Vant组件库第三方组件库:https://vant-contrib.gitee.io/vant/v2/#/zh-CN/引入组件方式一.自动按需引入组件(推荐)babel-plugin-import是一款babel插件,它会在编译过程中将......
  • HTML+CSS+Javascript+Vue
    TableofContentsI.HTMLII.CSSGetStartedI.HTML按tab自动生成LabelMeaningPropertiesdiv块状元素span行间元素h1-h6标题iicon图标strong字体加粗a超链接img插入图片video插入视频controlsinput表单(输入账号、......
  • 解决google启动自动拦截打开hao123,360,2345等页面问题
    这里只有干货,直接上流程,希望能帮到不曾谋面的朋友1.流程一:2.流程二:3.流程三:生成了一个副本4.流程四:5.流程五:双击打开就可以了**6.流程六:留下你宝贵的脚印**......
  • 给ELement 穿梭框加表单必填项验证,提示文字总是存在问题。该页面有重复提交功能
    背景目前项目中form表单提交中有地方用到了穿梭框,穿梭框是必填项,需要rules验证是否选择了数据,一般穿梭框是change触发 问题但是选择change触发,会出现如下问题,也就是用户一选,下面就触发校验规则了,用户体验很差 尝试解决方案将校验触发改成blur,啊哈解决但是又碰到新的问......
  • 【HarmonyOS】初识ArkUI——快速实现页面导航之Tabs
    ​ 【关键字】HarmonyOS、ArkUI、Tabs、自定义导航栏、底部导航 1、写在前面今天来介绍一下如何通过ArkUI来实现应用中常见的导航效果——底部导航,我们是通过Tabs来实现,并且会使用自定义导航栏的形式来构建,参考文档:https://developer.harmonyos.com/cn/docs/documentation/d......
  • 【HarmonyOS】初识ArkUI——快速实现页面导航之Navigation
    ​【关键字】HarmonyOS、ArkUI、Navigation、自定义导航栏、底部导航 1、写在前面今天继续来介绍如何通过ArkUI来实现应用中常见的导航效果——底部导航,上一篇中介绍了Tabs的实现方式,今天来介绍另一种组件Navigation,参考文档:https://developer.harmonyos.com/cn/docs/documen......
  • 详解vue大文件视频切片上传的处理方法
    前端上传大文件、视频的时候会出现超时、过大、很慢等情况,为了解决这一问题,跟后端配合做了一个切片的功能,接下来就详细的给大家介绍一下vue大文件视频切片上传的处理方法,需要的朋友可以参考下 前端上传大文件、视频的时候会出现超时、过大、很慢等情况,为了解决这一问题,跟后端......
  • java实现大文件的分片上传与下载(springboot+vue3)
    1.1项目背景对于超大文件上传我们可能遇到以下问题•大文件直接上传,占用过多内存,可能导致内存溢出甚至系统崩溃•受网络环境影响,可能导致传输中断,只能重新传输•传输时间长,用户无法知道传输进度,用户体验不佳1.2项目目标对于上述问题,我们需要对文件做分片传输。分片传输就是......