-
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){ }
更多相关内容 -
Vue2.0 Vue路由 全局前置路由守卫
2022-01-11 19:23:13全局前置路由守卫,确保哪些需要权限才可以被访问跟路由有关的第一个知识点: 路由守卫
这个东西很重要,开发当中用的很多
御前侍卫:保护君王的安全
我们路由守卫和御前侍卫干的活是一样的,只不过:
路由守卫:保护路由的安全(权限)。
有些时候不是所有的导航项不是可以随便点击的
你得符合了一些要求才可以点
提出要求
home
和About
随便点击,但是News
和Message
只能是有school
是bilibili
的才可以访问要求是点击
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 } ] })
About
和Home
都是一级路由,但是你这样写就瞬间把路由器暴露出去了(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是连
home
和about
都不能看,但我的需求是这俩个随意都能看,你得问问人家,你去哪,如果去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
谁需要权限的校验,我就放在谁那这里是
News
和Message
需要,所以:{ 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() } })
这就是前置路由守卫,切换前被调用
-
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2020-12-02 11:36:44如何使用路由守卫 定义一个index.js页面用来定义页面的路由,代码如下: import Vue from 'vue' import Router from 'vue-router' import blogIndex from '@/views/index' import loginComponent from -
Vue 前置路由守卫,router.beforeEach未生效
2021-07-07 15:26:04import 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) ... -
Vue路由守卫之路由独享守卫
2020-12-13 11:12:07在官方定义是这样说的:你可以在路由配置上直接定义 beforeEnter 守卫,这些守卫与全局前置守卫的方法参数是一样的。 const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter:... -
vue 路由守卫(导航守卫)及其具体使用
2020-11-21 05:07:10最近在学习vue,感觉路由守卫这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记 官方文档 导航守卫其实也是路由守卫,也可以是路由拦截,我们可以通过路由拦截,来判断用户是否登录,该页面用户是否有... -
Vue的路由守卫前置和后置
2021-08-20 22:52:18路由配置 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() } })
-
vue全局前置路由守卫、全局后置路由守卫及独享路由守卫
2022-04-18 22:45:26全局前置路由守卫 在路由跳转之前,我们可以对路由进行权限限制,它会传递一个回调函数,里面有三个参数 // to: 目标路由 // from: 当前路由 // next() 跳转 router.beforeEach((to, from, next) => { ... -
Vue:前置路由守卫 与 (个人版):简易路由
2021-04-07 23:40:42让客户需要重新找一次这种减少用户...上代码:// 前置路由守卫(路由导航) router.beforeEach((to, from, next) => { // 想要进入购物车页面,必须有token // console.log(‘to:’, to) // console.log(‘from:’ -
vue 路由守卫 -- 全局前置守卫
2022-03-24 09:04:04在这个守卫里面可以做一些防止用户非法进入页面的操作,在进入页面的时候可以做一些用户信息验证,判断是否具有 token ,不具有的话禁止用户进入页面,可以提高安全性 router.beforeEach((to, from, next) => { ... -
vue用路由守卫进行登录后的路由跳转
2022-01-18 22:50:31昨天已经成功地获取到登录的token,并将token存储在session storage中,今天完成了获取到token之前与之后内容页与登录页之间的路由跳转,主要用路由守卫来实现 在 router/index.js中,将要进行拦截的页面meta中... -
路由的前置路由守卫和后置路由守卫
2020-12-07 14:50:55vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。 beforeEach全局前置守卫当一个导航触发时,全局前置守卫按照创建顺序调用... -
vue 全局前置守卫应用实例
2021-06-16 16:58:51vue 全局前置守卫应用实例 解决路由传参后可以打开两个相同页面的问题。 解决方案: 需要在router.js里应用全局前置守卫给路由加相同的参数,例如token。 代码: Vue.use(Router) const router = new Router({ ... -
Vue项目配置路由以及设置路由守卫的正确方式(无坑可食用)
2021-12-23 16:06:46一、首先安装路由插件 cnpm install vue-router --save-dev 二、新建一个router文件夹,文件下新建一个index.js文件 三、index.js中引入router,代码如下 import Vue from 'vue' import Router from 'vue-... -
Vue全局路由守卫(验证登录状态)
2022-02-14 22:28:44Vue全局路由守卫验证登录状态 -
Vue 路由 导航守卫(前置守卫、后置守卫、组件内守卫)
2021-06-30 16:43:28Vue 路由 导航守卫 总体来讲vue里面提供了三大类钩子,两种函数 1、全局钩子 1、某个路由的钩子 3、路由组件的钩子 · · · 全局前置守卫 router.beforeEach 注册一个全局前置守卫 ---->/*在跳转之前执行*/ ... -
vue 通过路由守卫阻止跳转
2019-07-30 10:15:24使用的环境是 vue3,其他版本没做测试仅作参考 案例分析 制作一个登陆界面,在点击登录的时候进行匹配账号和密码,成功后再切换组件,如果输错弹出alter。 前提条件:登录是一个嵌套在内部的按钮 解决方式 在路由... -
vue路由守卫及路由守卫无限循环问题详析
2021-01-19 19:18:23当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。 每个守卫方法接收三个参数: to: Route: 即将要进入的目标 路由对象 from: Route:... -
Vue 路由钩子(导航守卫)详解及应用场景
2021-01-08 08:55:22在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:16vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中:全局的,单个路由独享的,或者组件级的。 路由前置守卫: 你可以使用router.beforEach注册一个全局前置守卫: ... -
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020-11-20 01:37:57全局路由守卫this.$vux.loading.hide()报错,访问不到this 解决办法 申明变量代替this main.js文件方法 router.beforeEach((to, from, next) => { if(vue){ vue.$vux.loading.hide() }else{ } next() }) let ... -
vue路由守卫之全局守卫
2021-12-29 11:43:10vue的全局守卫 -
vue 路由导航守卫 全局前置守卫
2020-06-19 12:01:12var 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|... -
Vue路由的详细介绍(路由传参,跳转,守卫)
2022-01-27 18:23:49路由传参 query传参 直接在请求路径后面以键值对的形式传递参数的形式为query传参 通过$route.query读取对应参数 params传参 直接在请求路径后面接参数且需要在对应路由... -
Vue-router路由守卫
2022-03-13 22:53:09Vue-router路由守卫;路由守卫调用时机及顺序 -
Vue 全局路由守卫
2021-11-19 10:13:03mate配置项专门用于给...全局路由守卫(责任相当于门卫,用来判断可以放行哪些)分为前置路由守卫和后置路由守卫(责任相当于服务员,已经放人进来,做一些服务工作) 给一个route配置守卫:beforeEnter ...