精华内容
下载资源
问答
  • Vue笔记 前置路由守卫和后置守卫
    2022-04-08 21:02:07

    前置路由守卫和后置路由守卫

    1、作用:对路由进行权限控制

    2、分类:全局守卫、独享守卫、组件内守卫

    3、全局守卫:

    //全局前置守卫:初始化时执行、每次路由切换前执行
    router.beforeEach((to,from,next)=>{
         console.log('beforeEach',to,from)
         if(to.meta.isAuth){  //判断当前路由是否需要进行权限控制
             if(localStorage.getItem('school')==='atguigu'){   //权限控制的具体规则
                 next()//放行
       }else{
          alert('暂无权限查看')
           //next({name:'guanyu'})
        }
       }else{
           next()  //放行
       }
    })
    
    
    //全局后置守卫:初始化时执行、每次路由切换后执行
    router.afterEach((to,from)=>{
        console.log('afterEach',to,from)
        if(to.meta.title){
           document.title = to.meta.title  //修改网页的title
        }else{
            document.title = 'vue_test'
         }
    })

    4、独享守卫 

    beforeEnter((to,from,next)=>{
         console.log('beforeEnter',to,from)
         if(to.meta.isAuth){  //判断当前路由是否需要进行权限控制
             if(localStorage.getItem('school')==='atguigu'){   //权限控制的具体规则
                 next()//放行
       }else{
          alert('暂无权限查看')
           //next({name:'guanyu'})
        }
       }else{
           next()  //放行
       }
    })
    
    
    

    5、组件守卫

    //进入守卫:通过路由规则,进入该组件时被调用
    beforeRouteEnter(to,from,next){
    },
    
    //离开守卫:通过路由规则,离开该组件时被调用
    beforeRouteLeave(to,from,next){
    }

    更多相关内容
  • 全局前置路由守卫,确保哪些需要权限才可以被访问

    知道了全新的俩个生命周期钩子还有

    跟路由有关的第一个知识点: 路由守卫

    这个东西很重要,开发当中用的很多

    御前侍卫:保护君王的安全

    我们路由守卫和御前侍卫干的活是一样的,只不过:

    路由守卫:保护路由的安全(权限)。

    有些时候不是所有的导航项不是可以随便点击的

    你得符合了一些要求才可以点

    提出要求

    homeAbout随便点击,但是NewsMessage只能是有schoolbilibili的才可以访问

    要求是点击News或者Message的时候帮我校验一下school是不是bilibili。是就可以访问下面的内容,如果不是就不能访问

    解决要求

    这事得跟路由器商量商量:

    就是以后有人访问的这个路由是/home/news就让路由帮我们做一件事,你去localStorage中的那个school你帮我读取出来看看是不是bilibili,如果是,组件正常呈现;如果不是就别呈现了。所以

    router > index.js

    //我让每一个路由都有名字
    export default new VueRouter({
        routes:[
            //想在哪里进行二次跳转,就写在个配置里(用children)
            {
                name: 'zhuye',
                path: '/home',
                component: Home,
                children:[
                    {
                        name: 'xinxi',
                        path: 'news',//注意路由底层给你加了'/'如果自己加'/'有可能还显示不出效果
                        component:News,
                    },
                    {
                        name: 'xiaoxi',
                        path: 'message',
                        component: Message,
                        children:[
                            {
                                name: 'xiangqing',
                                path: 'detail/:id/:name',
                                component: Detail,
    
                                props($route){
                                    return {id: $route.query.id, name: $route.query.name}
                                }
                            }
                        ]
                    }
                ]
            },
            {
                name:'guanyu',
                path: '/about',
                component: About
            }
        ]
    })
    

    AboutHome都是一级路由,但是你这样写就瞬间把路由器暴露出去了(export default ...)所以你先要接住路由器(const router)

    const router = new VueRouter({
        routes:[...]
    })
    //暴露之前跟它商量商量
    //加一个路由守卫
    //借助自身身上特别的API了,叫做'beforeEach'
    //before:  ...之前
    //Each:每一个;每一次;每一人
    //我们要做的就是每一次切换之前,都会帮你调用一个。。函数
    //这个有点像setTimeout,我调setTimeout是指定一个定时器的回调函数,那我调beforEach的回调函数的目的是指定路由每次切换时的一次回调函数就是()=>{}这个
    //全局前置路由守卫--初始化的时候被调用,每次调用路由切换之前被调用
    router.beforeEach(()=>{
    	console.log('@')//测试
    })
    
    export default router
    

    只要你形成路由的跳转(A -> B),那么router.beforEach中的函数就会被调用的,而且这是在切换进行之前调用的

    你点击Home组件内容没出来,待会儿再说

    但是只要你切换,它就调beforeEach里面的方法

    为什么什么都没有,就要研究里面的参数了:

    • to(字面意思:你要去哪)
    • from(字面意思:你来自于哪)

    输出to,from

    router.beforeEach((to,from)=>{
    	console.log('to=',to,'from=',from)//测试
    })
    

    一上来的这一次不用关心(因为起点终点是一致的):

    to= {name: null, meta: {…}, path: '/', hash: '', query: {…}, …}
    from= {name: null, meta: {…}, path: '/', hash: '', query: {…}, …}
    

    我们点击(切换)到home:

    to= {name: 'zhuye', meta: {…}, path: '/home', hash: '', query: {…}, …}
    from= {name: null, meta: {…}, path: '/', hash: '', query: {…}, …}
    

    把你要去的目标路由信息都给你了

    还是去不了,因为就这里的路由守卫的内容 把你所有的都给拦住了

    这时next就有用了

    • next(放行)

    你没有说放行,它不敢往下走

    router.beforeEach((to,from,next)=>{
    	console.log('to=',to,'from=',from)//测试
        next()
    })
    

    你这么一写就可以了


    接下来就只要判断你什么时候放行,什么时候不放行就可以了

    动态决定是否放行

    第一步:

    router.beforeEach((to,from,next)=>{
    	console.log('to=',to,'from=',from)//测试
        if(localStorage.getItem('school')==='bilibili'){
            next()
        }
    })
    

    如果没有school-bilibili是连homeabout都不能看,但我的需求是这俩个随意都能看,你得问问人家,你去哪,如果去home和about我不管你,只要你去news和message我就要管你

    第二步:

    你得判断to里面的path或者name:

    router.beforeEach((to,from,next)=>{
    	console.log('to=',to,'from=',from)//测试
        if(to.path === '/home/news' || to.path === '/home/message'){
            if(localStorage.getItem('school')==='bilibili'){
            	next()
        	}else{
                alert('学校名不对,无权限查看')
            }
        }else{
            next()
        }
    })
    

    路由前如果拦截,你会发现路径是不变的

    用名字决定

    router.beforeEach((to,from,next)=>{
    	console.log('to=',to,'from=',from)//测试
        if(to.name === 'xinxi' || to.name === 'xiaoxi'){
            if(localStorage.getItem('school')==='bilibili'){
            	next()
        	}else{
                alert('学校名不对,无权限查看')
            }
        }else{
            next()
        }
    })
    

    配置自定义属性

     if(to.name === 'xinxi' || to.name === 'xiaoxi')
    

    是不是觉得这段很鸡肋,如果要写12个100个是不是裂开?

    能否在路由的配置项里面加一个配置来判断?

    在路由的配置项里面,一个一个配置项都是写好的

    我们先看this.$router:

    mounted(){
        console.log('%%%',this.$route)
    }
    
    %% 
    {name: 'xinxi', meta: {…}, path: '/home/news', hash: '', query: {…}, …}
        fullPath: "/home/news"
        hash: ""
        matched: (2) [{…}, {…}]
        meta: {}
        name: "xinxi"
        params: {}
        path: "/home/news"
        query: {}
        [[Prototype]]: Object	
    

    加一点自己独有的配置,怎么放?告诉你: 往meta里面放

    我们管这个meta路由元信息

    {
        name:'guanyu',
        path: '/about',
        component: About,
        meta:{
            //这里可以不写,拿不出来就是undefined,undefined说明是假
            isAuth: false//isAuth:是否授权
        }
    }
    

    isAuth谁需要权限的校验,我就放在谁那

    这里是NewsMessage需要,所以:

    {
         name: 'xinxi',
         path: 'news',//注意路由底层给你加了'/'如果自己加'/'有可能还显示不出效果
         component:News,
         meta:{isAuth:true}
     },
     {
         name: 'xiaoxi',
         path: 'message',
         component: Message,
         children:[
             {
                 name: 'xiangqing',
                 path: 'detail/:id/:name',
                 component: Detail,
                props($route){
                    return {id: $route.query.id, name: $route.query.name}
                }
            }
        ],
        meta:{isAuth:true}
    }
    

    那么路由守卫里面就可以这么写:

    router.beforeEach((to,from,next)=>{
    	console.log('to=',to,'from=',from)//测试
        if(to.meta.isAuth){//判断是否鉴权
            if(localStorage.getItem('school')==='bilibili'){
            	next()
        	}else{
                alert('学校名不对,无权限查看')
            }
        }else{
            next()
        }
    })
    

    这就是前置路由守卫,切换前被调用

    全局后置路由守卫

    展开全文
  • 如何使用路由守卫 定义一个index.js页面用来定义页面的路由,代码如下: import Vue from 'vue' import Router from 'vue-router' import blogIndex from '@/views/index' import loginComponent from
  • import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Login from '@/components/Login' import Vuex from '@/components/Vuex.vue' Vue.use(Router) ...
  • 在官方定义是这样说的:你可以在路由配置上直接定义 beforeEnter 守卫,这些守卫与全局前置守卫的方法参数是一样的。 const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter:...
  • 最近在学习vue,感觉路由守卫这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记 官方文档 导航守卫其实也是路由守卫,也可以是路由拦截,我们可以通过路由拦截,来判断用户是否登录,该页面用户是否有...
  • 路由配置 const router = new VueRouter({ mode: 'history', routes: [ { path: '/', redirect: '/blog/welcome' }, { path: '*', name: 'NotFound', component: NotFound, meta: { isAuth: false, title...

    路由配置

    const router = new VueRouter({
      mode: 'history',
      routes: [
        {
          path: '/',
          redirect: '/blog/welcome'
        },
        {
          path: '*',
          name: 'NotFound',
          component: NotFound,
          meta: { isAuth: false, title: '页面找不到' }
        },
        {
          path: '/blog',
          component: BlogFrame,
          redirect: '/welcome',
          children: [
            {
              path: 'login',
              component: Login,
              meta: { isAuth: false, title: '登录博客' }
            },
            { path: 'welcome', component: Welcome, meta: { isAuth: false } },
            {
              path: 'authorupdate',
              component: AuthorUpdate,
              meta: { isAuth: true }
            },
            { path: 'search', component: Search, meta: { isAuth: false } },
            {
              path: 'detail',
              component: ArticleDetail,
              meta: { isAuth: false, title: '文章详情' }
            },
            {
              path: 'authorarticle',
              component: AuthorArticle,
              meta: { isAuth: true, title: '我的文章' }
            },
            {
              path: 'editarticle',
              component: EditArticle,
              meta: { isAuth: true, title: '博客编辑' }
            }
          ]
        },
    })
    
    

    前置路由守卫:用于拦截权限页面

    // 路由守卫
    router.beforeEach((to, from, next) => {
      if (to.meta.isAuth == false) {
        next()
      } else {
        if (window.sessionStorage.getItem('token') === null) {
          next('/blog/login')
        } else {
          next()
        }
      }
    })
    

    后置路由守卫,少了next,负责添加页签title

    router.afterEach((to, next) => {
      if (to.meta.title) {
        document.title = to.meta.title
      } else {
        document.title = '悦读堂'
      }
    })
    export default router
    
    展开全文
  • vue——前置路由守卫

    千次阅读 2018-11-18 15:35:55
    路由守卫,当目标路由设置了路由守卫,...注意:父路由设置了路由守卫,子路由也应该设置路由守卫,不然路由守卫会失败 import Vue from 'vue' import Router from 'vue-router' import home from '@/views/home....

    路由守卫,当目标路由设置了路由守卫,如果没有做相应的验证(如登陆),无法跳转到目标路由

    在路由配置中添加meta属性,属性为自定义,用于守卫判断,

    注意:父路由设置了路由守卫,子路由也应该设置路由守卫,不然路由守卫会失败

    import Vue from 'vue'
    import Router from 'vue-router'
    import home from '@/views/home.vue'
    import login from '@/views/login.vue'
    import Register from '@/views/register.vue'
    
    Vue.use(Router)
    export default new Router({
      mode:'history',
      routes: [
        {
          path: '/',
          name: 'home',
          component: home,
          //当前路由的元数据,自定义
          meta:{
            requireAuth:true
          }
        },
        {
          path:'/login',
          name:'login',
          component:login,
          meta:{
            cheakIsLogin:true
          }
        },
        {
          path:'/register',
          name:'Register',
          component:Register,
          meta:{
            cheakIsLogin:true
          }
        }
      ]
    })
    

    在main.js入口文件中,添加守卫判断

    //前置路由守卫
    router.beforeEach((to,from,next)=>{
      //to 目标路由
      //from 来源
      //next 放行
    
      //如果需要验证,首页守卫
      if(to.meta.requireAuth){
        //vuex仓库中的信息是否存在
        if(store.getters.user.userName){
          next()
        }else{
          //拦截路由
          next('./login')
        }
      }else{//不需要验证,直接放行
        next()
      }
      //登陆、注册守卫
      if(to.meta.cheakIsLogin){
        if(store.getters.user.userName){
          // next('/')
          //路由让其返回至原来的地址
          router.back()
        }else{
          next()
        }
      }else{
        next()
      }
    })

     

    展开全文
  • 全局前置路由守卫 在路由跳转之前,我们可以对路由进行权限限制,它会传递一个回调函数,里面有三个参数 // to: 目标路由 // from: 当前路由 // next() 跳转 router.beforeEach((to, from, next) => { ...
  • 让客户需要重新找一次这种减少用户...上代码:// 前置路由守卫(路由导航) router.beforeEach((to, from, next) => { // 想要进入购物车页面,必须有token // console.log(‘to:’, to) // console.log(‘from:’
  • 在这个守卫里面可以做一些防止用户非法进入页面的操作,在进入页面的时候可以做一些用户信息验证,判断是否具有 token ,不具有的话禁止用户进入页面,可以提高安全性 router.beforeEach((to, from, next) => { ...
  • 昨天已经成功地获取到登录的token,并将token存储在session storage中,今天完成了获取到token之前与之后内容页与登录页之间的路由跳转,主要用路由守卫来实现 在 router/index.js中,将要进行拦截的页面meta中...
  • vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。 beforeEach全局前置守卫当一个导航触发时,全局前置守卫按照创建顺序调用...
  • vue 全局前置守卫应用实例 解决路由传参后可以打开两个相同页面的问题。 解决方案: 需要在router.js里应用全局前置守卫路由加相同的参数,例如token。 代码: Vue.use(Router) const router = new Router({ ...
  • 一、首先安装路由插件 cnpm install vue-router --save-dev 二、新建一个router文件夹,文件下新建一个index.js文件 三、index.js中引入router,代码如下 import Vue from 'vue' import Router from 'vue-...
  • Vue全局路由守卫验证登录状态
  • Vue 路由 导航守卫 总体来讲vue里面提供了三大类钩子,两种函数 1、全局钩子 1、某个路由的钩子 3、路由组件的钩子 · · · 全局前置守卫 router.beforeEach 注册一个全局前置守卫 ---->/*在跳转之前执行*/ ...
  • vue 通过路由守卫阻止跳转

    千次阅读 2019-07-30 10:15:24
    使用的环境是 vue3,其他版本没做测试仅作参考 案例分析 制作一个登陆界面,在点击登录的时候进行匹配账号和密码,成功后再切换组件,如果输错弹出alter。 前提条件:登录是一个嵌套在内部的按钮 解决方式 在路由...
  • 当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。 每个守卫方法接收三个参数: to: Route: 即将要进入的目标 路由对象 from: Route:...
  • vue-router的官方文档中, 将路由钩子翻译为导航守卫。 1. 路由钩子语法 1.1 全局前置守卫 你可以使用 router.beforeEach 注册一个全局前置守卫: const router = new VueRouter({ ... }) router.beforeEach((to, ...
  • Vue登录路由守卫

    2021-11-28 10:21:16
    路由的安装与配置:详情跳转 源代码: 路由器配置页面 import Vue from 'vue' import VueRouter from 'vue-router' import Mylogin from '../components/MyLogin.vue' Vue.use(VueRouter) const router = new ...
  • Vue路由守卫

    2022-03-13 20:59:16
    vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中:全局的,单个路由独享的,或者组件级的。 路由前置守卫: 你可以使用router.beforEach注册一个全局前置守卫: ...
  • 全局路由守卫this.$vux.loading.hide()报错,访问不到this 解决办法 申明变量代替this main.js文件方法 router.beforeEach((to, from, next) => { if(vue){ vue.$vux.loading.hide() }else{ } next() }) let ...
  • vue的全局守卫
  • var routerPush = VueRouter.prototype.push VueRouter.prototype.push = function(location, onComplete, onAbort) { if(typeof location == "string") { let s = "&" if(location.indexOf('?') == -1) { s...
  • vue——路由守卫

    2022-03-05 21:10:04
    // 全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用 router.beforeEach((to,from,next) => { //to为目的路由信息 from为起始路由信息 console.log(to,from) //可在此添加一些限制条件 ...
  • vue路由守卫内获取实例

    千次阅读 2019-01-23 09:53:01
    由于路由守卫是一个回调函数,this是不指向实例的,如下vm为实例 beforeRouteEnter:(to,from,next)=>{ next((vm) => { var data=vm.$store.state.user if(data===""||data===undefined|...
  • 路由传参 query传参 直接在请求路径后面以键值对的形式传递参数的形式为query传参 通过$route.query读取对应参数 params传参 直接在请求路径后面接参数且需要在对应路由...
  • Vue-router路由守卫

    2022-03-13 22:53:09
    Vue-router路由守卫路由守卫调用时机及顺序
  • Vue 全局路由守卫

    2021-11-19 10:13:03
    mate配置项专门用于给...全局路由守卫(责任相当于门卫,用来判断可以放行哪些)分为前置路由守卫和后置路由守卫(责任相当于服务员,已经放人进来,做一些服务工作) 给一个route配置守卫:beforeEnter ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,544
精华内容 1,817
关键字:

vue前置路由守卫