首页 > 其他分享 >vue 路由守卫

vue 路由守卫

时间:2022-12-01 23:55:32浏览次数:56  
标签:vue else 守卫 token localStorage next 路由

vue 路由守卫

路由前置守卫(全局)

  • to, 即将要进入的目标,路由对象

  • from, 当前导航正要离开的路由

  • next(需要填写函数) 当满足条件时放行

 router.beforeEach((to, from, next) => {
 if (to.path == "/user/cart") {
    let token = localStorage.getItem("x-auth-token")
    if (token) {
      next()
    } else {
alert("404")
    }
  } else {
    next()
  }
  console.log("路由前置守卫", to, from);
})

 

路由局部守卫

  • 因为是局部守卫,所以从哪来和要去哪都是固定的,所以可以直接调用next

 {
   path: '/user',
   name: 'user',
   component: () => import('../views/user.vue'),

beforeEnter: (to, from, next) => {
     let token = localStorage.getItem("x-auth-token")
     if (token) {
       next()
    } else {
       alert("404")
      //或调取提示组件的方法
    }}
},

 

组件路由守卫

  • 与methods同级,并且不需要写to from

export default {
   data() {  return {...};},
   methods: {...},
   beforeRouteEnter(to, from, next) {
       let token = localStorage.getItem("x-auth-token")
       if (token) {
           next()
      } else {
          alert("404"),
      //或调取提示组件的方法
  }}};

 

 

路由守卫中调取提示组件的方法

  • 因为路由守卫在创建期以前,没有this指向,所以需要使用 store.dispatch

       store.dispatch("方法路径", {参数})

实例:

export default {
   data() {  return {...};},
   methods: {...},
   beforeRouteEnter(to, from, next) {
       let token = localStorage.getItem("x-auth-token")
       if (token) {
           next()
      } else {
           //调取提示组件的方法
           store.dispatch("showToast/asyncchangeisShowToast", {
               show: true,
               text: "请先登录!",
               icon: "warning"
          })
}}};
 

标签:vue,else,守卫,token,localStorage,next,路由
From: https://www.cnblogs.com/Dollom/p/16943189.html

相关文章

  • 微信小程序实战,基于vue2实现瀑布流
    1、什么是瀑布流呢?瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前......
  • Vue2(笔记08) - Vue核心 - 绑定Class样式、绑定Style样式
    绑定Class样式Vue里引入 ​​:class="xxx"​​ 来绑定样式,"xxx" 即可以是样式名,也可以是表达式,原有class 不动;​字符串写法适用于样式的类名不确定,需要动态指定​需求:......
  • vue局部刷新 (组件重载)
     组件重载的运用是当组件的数据产生了变化之时,需要通过重载来实现组件页面的刷新,而不是重新刷新URL进行重新请求,也可以理解为是局部刷新 步骤:在父级页面通过......
  • Vue2适用的视频组件
    Vue2适用的视频组件官方文档路径西瓜视频官方文档:http://v2.h5player.bytedance.com/gettingStarted/随笔制作参考:https://juejin.cn/post/7023547598724136990#hea......
  • vue3实战
    1.vue官方文档1.创建项目方式一:vite(推荐)npminitvue@latest会有如下提示Needtoinstallthefollowingpackages:create-vue@3Oktoproceed?(y)y------......
  • vue中导出PDF和图片
    1、安装:npminstallhtml2canvasjspdf--save2、创建:html2canvas.js文件,内容如下:importhtml2Canvasfrom'html2canvas'importJsPDFfrom'jspdf'/***@para......
  • vue-CLI脚手架
    1.使用cmd创建1.1管理员方式打开cmd,安装官网安装vue-clihttps://cli.vuejs.org/zh/guide/installation.html1.2安装成功,提示无vue命令npmconfiglist找到prefix......
  • 【一库】vueuse:我不许身为vuer,你的工具集只有lodash!
      vueuse是什么?一款基于Vue组合式API的函数工具集。以上是官方网站关于它的定义。官网地址首先,它基于VueCompositionApi(组合式API),只有在支持组合式API......
  • 【ASP.NET Core】MVC控制器的各种自定义:特性化的路由规则
    MVC的路由规则配置方式比较多,咱们用得最多的是两种:A、全局规则。就是我们熟悉的”{controller}/{action}“。app.MapControllerRoute(name:"bug",pa......
  • vue.config.js --- vue-cli 4.0配置
    //所有配置请参考https://cli.vuejs.org/zh/config/module.exports={/***publicPath*hash模式下可使用*publicPath:process.env.NODE_ENV==='......