江苏住房和城乡建设厅官方网站6,行知智网站建设,国外做网站侵权,辽宁省建设银行招聘网站路由守卫或者说路由拦截#xff0c;在我们实际开发前端项目中是经常用到的操作#xff1b;
通过路由守卫#xff0c;可以在用户访问某个路由之前进行权限验证。#xff08;全局前置守卫#xff09;例如#xff0c;可以检查用户是否登录#xff0c;是否具有访问该路由的…路由守卫或者说路由拦截在我们实际开发前端项目中是经常用到的操作
通过路由守卫可以在用户访问某个路由之前进行权限验证。全局前置守卫例如可以检查用户是否登录是否具有访问该路由的权限如果不满足条件则可以将用户重定向到其他页面或显示相应的提示信息。
全局前置守卫在每次路由跳转之前被触发
可以使用 router.beforeEach 注册一个全局前置守卫
// 前置守卫router.beforeEach((to, from) {}
)
当一个导航触发时全局前置守卫按照创建顺序调用。守卫是异步解析执行此时导航在所有守卫 resolve 完之前一直处于等待中。
每个守卫方法接收两个参数
to: 即将要进入的目标
from: 当前导航正要离开的路由
可以返回的值如下:
false: 取消当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)那么 URL 地址会重置到 from 路由对应的地址。一个路由地址: 通过一个路由地址重定向到一个不同的地址如同调用 router.push()且可以传入诸如 replace: true 或 name: home 之类的选项。它会中断当前的导航同时用相同的 from 创建一个新导航。
// 前置守卫
// 全局拦截、除了登录页面其他页面都必须授权这里为pinia定义的token不为空才能访问
router.beforeEach((to, from) {
const useTokenuseTokenStore()
if (to.name ! login !useToken.token) {return { name: Login }
}
else{return true}
}
)
在这个路由全局拦截方法中我们规定如果只有login页面才能被所有人访问访问的页面不是login页面都要有身份认证pinia定义的token才行如果没有、则会自动跳到login登录页面这在我们前端开发中是经常用到的。
如果遇到了意料之外的情况可能会抛出一个 Error。这会取消导航并且调用 router.onError() 注册过的回调。
如果什么都没有undefined 或返回 true则导航是有效的并调用下一个导航守卫
可选的第三个参数 next
在之前的 Vue Router 版本中vue-router3还可以使用 第三个参数 next 。在最新版的vue-router4版本中官方移除了next参数推荐我们只使用to、from这两个参数。然而它仍然是被支持的这意味着你可以向任何导航守卫传递第三个参数。
在这种情况下确保 next 在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次但是只能在所有的逻辑路径都不重叠的情况下否则钩子永远都不会被解析或报错。
错误的next使用方法(这时如果用户没有携带token那么next会被调用两次)
// 前置守卫
// 全局拦截、除了登录页面其他页面都必须授权这里为pinia定义的token不为空才能访问
router.beforeEach((to, from, next) {
const useTokenuseTokenStore()
if (to.name ! login !useToken.token) {next({name: login})
}next()}
)
正确的用法务必确保next只被调用一次
// 前置守卫
// 全局拦截、除了登录页面其他页面都必须授权这里为pinia定义的token不为空才能访问
router.beforeEach((to, from, next) {
const useTokenuseTokenStore()
if (to.name ! login !useToken.token) {next({name: login})
}
else{next()
}
}
) 全局后置钩子在每次路由跳转之后被触发
可以注册全局后置钩子然而和守卫不同的是这些钩子不会改变导航本身
// 后置守卫
router.afterEach((to, from) {
console.log(路由跳转的路径,to.path)
}
)
一般来说我们经常使用前置钩子因为它能够在我们跳转路由之前进行拦截。后置钩子我们一般用于分析、记录日志、声明页面等辅助功能以及许多其他事情都很有用。
全局解析守卫
可以用 router.beforeResolve 注册一个全局守卫。它在每次导航时都会触发不同的是解析守卫刚好会在导航被确认之前、所有组件内守卫和异步路由组件被解析之后调用。这意味着在路由对象被创建之后但还没有被解析或渲染时全局解析守卫将会被触发。
router.beforeResolve( to {if (to.meta.requiresCamera) {try {} catch (error) {if (error instanceof NotAllowedError) {// 处理错误然后取消导航return false} else {// 意料之外的错误取消导航并把错误传给全局处理器throw error}}}
})
router.beforeResolve 是获取数据或执行任何其他操作如果用户无法进入页面时你希望避免执行的操作的理想位置。
组件内的守卫
组件内的守卫分为三种
beforeRouteEnter在渲染该组件的对应路由被验证前调用 当守卫执行时组件实例还没被创建
注意在 vue3 中的 setup 函数中是不可以使用 beforeRouterEnter 这个路由守卫的
方法一、我们可以在设置路由的时候使用beforeEnter方法拦截即在router.js中
{path: /users/:id,component: UserDetails,beforeEnter: (to, from) {
// 可以在定义路由的时候监听from和toreturn false},}
方法二、使用选项式api就可以使用beforeRouterEnter这个钩子了
script
export default {beforeRouteEnter(to, from) {console.log(before router enter, to, from)}
}
/script
beforeRouteUpdate 在当前路由改变但是该组件被复用时调用
举例来说对于一个带有动态参数的路径 /users/:id在 /users/1 和 /users/2 之间跳转的时候
// 在当前路由改变但是该组件被复用时调用
// 举例来说对于一个带有动态参数的路径 /users/:id在 /users/1 和 /users/2 之间跳转的时候
onBeforeRouteUpdate((to,from){
console.log(from.path,更新为了,to.path);}
beforeRouteLeave在导航离开渲染该组件的对应路由时调用 // 在导航离开渲染该组件的对应路由时调用
onBeforeRouteLeave((to,from){
console.log(from.path,离开了);})
