位置: IT常识 - 正文

vue中 router.beforeEach() 的用法

编辑:rootadmin
vue中 router.beforeEach() 的用法

推荐整理分享vue中 router.beforeEach() 的用法,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

导航守卫 主要是通过跳转或取消得方式守卫导航

在前端路由跳转中,路由跳转前都是会经过beforeEach,而beforeEach可以通过next来控制到底去哪个路由。根据这个特性我们就可以在beforeEach中设置一些条件来控制路由的重定向。

常见的使用场景有:

1、验证用户是否登录(若未登录,且当前非登录页面,则自动重定向登录页面);2、用户权限;3、用户输入的路路径是否存在,不存在的情况下如何处理,重定向到哪个页面。vue中 router.beforeEach() 的用法

此处呢我使用一个简单的例子: 当用户输入的路径不存在的情况下,将其重定向到‘/’路径来说明beforeEach是如何控制路由的。

话不多说,直接看下边如何实现的(这里我以创建一个名为router-be的项目为例)。

第一步 : 规定进入路由是否需要权限

@/router/index.js

import A from '@/components/a'{path : '/a',name : 'a',component : A,meta : { // 加一个自定义objrequireAuth : true // 参数 true 代表需要登陆才能进入 A}}第二步 : 使用vuex 整一个useid

@/assets/store.js

//使用vuex三步走import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)//这个理论来说const store = new Vuex.Store({state:{userId : ''}})export default store第三步 : 使用router.beforeEach()思路:【如果(进入这个路由需要权限){如果(能获取到这个用户的userID){就让这个用户进入这个路由}否则{就让这个用户进入b这个页面}} 即将进入的路由不需要权限就能进入 {就让这个用户进入这个路由}】对应代码:import store from '@/assets/store' //把这个userId获取过来router.beforeEach((to,from,next)=>{if(to.meta.requireAuth){if(store.state.userId){next()}else{next({path:'/b'})}}else{next()}})实现原理 constrouter=newVueRouter({…}) router.beforeEach((to,from,next)=>{// …}) 每个守卫方法接受三个参数 :

1.to => route : 即将进入的目标路由对象 2.from => route : 当前导航正要离开的路由 3.next => function: 一定要调用该方法来 resolve这个钩子,执行效果以来 next 方法的调用参数

第四步上一步 /b 路由为 登陆页面当进入A 页面之前,需要先请求接口,获取是否有登录,然后把userId存在vuex 的state 中当没有userId 时,则在登录之后,存一个userId 到state 里第五步 项目中使用router.beforeEach((to, from, next) => { console.log(to); // DEBUG: 测试 return next(); const { ldomain } = to.query; if (ldomain) { document.domain = ldomain; } const { LoginPage } = byskConfig; if (!router.getMatchedComponents(to.path).length) { console.log("not page", to, from); return next(byskConfig.NotFoundPage.path); } //验证权限 if (to.meta.permId && !hasPerms(to.meta.permId)) { console.log("no auth", to, from); return next(LoginPage.path); } //验证是否登录 if (to.meta.permId && !getCookie("sid")) { console.log("no login & signout", to, from); return next(LoginPage.path); } if (to.matched.length) { let parentRoute = to.matched[to.matched.length - 1].parent; if ( parentRoute && parentRoute.meta.hasOwnProperty("redirect") && parentRoute.meta.redirect !== to.path) { parentRoute.meta.redirect = to.path; } } next();});

权限

export function setupPermissionGuard(router) { router.beforeEach(async (to, from, next) => { const { state, commit, dispatch } = store; // TODO: 404 的处理 // 不需要登录,可访问 if (to.meta.ignoreAuth === true) { next(); return; } // TODO: 白名单 // 刷新重新登录 if (!state.appToken) { await dispatch('relogin'); } // 处理token const hasToken = !!state.appToken; if (!hasToken) { // 未登陆,或过期 // 重定向到登录页 const redirectData = { path: LOGIN_PATH, replace: true, }; next(redirectData); return; } // 判断是否有权限 const hasAuthority = to.meta.permId && hasPerms(to.meta.permId); if (hasAuthority) { // 权限验证 if (to.meta.ignoreKeepAlive !== true) { // 页面需要缓存, 添加到缓存 const { cachePages } = state; const { matched } = to; commit('setCachePages', [...cachePages, ...matched.slice(1)]); } next(); return; } next(from.path); // next(); }); router.afterEach((to) => { if (to.meta?.label) { // 设置页面`title` document.title = `一立科技 - ${to.meta.label}`; } });}

本文链接地址:https://www.jiuchutong.com/zhishi/296092.html 转载请保留说明!

上一篇:【前端学习笔记—使用JS修改样式】(前端基础入门)

下一篇:ElementUI中<el-form>标签中 ref、:model、:rules 的作用

  • 物流公司如何办理营运证
  • 专利权的手续费是多少
  • 印花税多报了几块钱税务局会找我吗
  • 利润表盈利结构分析
  • 运输企业支付罚款如何账务处理
  • 销售商品提供劳务收到的现金包括
  • 韩国购物小票怎么看图解
  • 社保委托代发银行账号是空的
  • 为什么有的发票税率是3%,有的是1%
  • 高新技术企业研发人员占比
  • 各种收入与应纳税额的比例
  • 工程公司后期维保费用如何入账?
  • etc开了充值发票还可以开消费发票么?
  • 开增值税发票开户行怎么填?
  • 营改增后小规模都是三个点吗
  • 发票勾选 发票认证
  • 机械租赁费如何入账科目
  • bios如何恢复默认值
  • 在windows 10中
  • 餐饮业成本核算明细表
  • 企业债券和公司债券
  • 预付卡销售怎么做账
  • linux杀死服务
  • Sublime Text v4.0(4143)破解方法
  • js16.vip
  • lvgl使用
  • PHP:is_uploaded_file()的用法_Filesystem函数
  • 提足折旧仍使用的逾龄房产是否交房产税
  • iframe frame
  • 发财树怎么修剪枝叶视频教程
  • 塞里雅兰瀑布图片高清
  • Calanques de Piana岩层上的一个心形洞,法国科西嘉岛 (© joningall/Getty Images)
  • thinkphp import
  • 其他收益会计科目怎么写
  • nlp baseline
  • 卷积拆分
  • GPT-4:关于下一代人工智能模型的事实、谣言和期望
  • js相关知识
  • 小企业固定资产折旧方法
  • 利润表中的管理费用怎么填
  • css代码基础
  • 帝国cms升级到7.5后不能发布内容信息
  • 织梦如何使用
  • 周转材料低值易耗品怎么结转
  • 免征企业所得税的有哪些行业
  • 企业所得税的营业收入包括营业外收入吗
  • 债券发行时发生的承销费、法律费
  • 微信支付宝等第三方支付的优缺点
  • 保险费计入什么科目
  • 股东权益合计等于净资产吗
  • 转让旧固定资产怎么处理
  • 上期留底增值税什么意思
  • 资本公积的账务处理例题
  • 结转销售成本的分录
  • 跨年的进项税额转出要补交税款吗
  • 付给其他公司的服务费怎么记账
  • 价税分离怎么算
  • 发出商品属于存货的什么科目
  • 销售费用明细科目有哪些内容
  • Win10怎么设置高性能
  • mac安装路径选择
  • ubuntu15.04系统怎么使用卸载命令卸载软件?
  • mac电脑系统安装
  • executor进程
  • ubuntu设置登录用户
  • win7禁用全屏优化在哪
  • win10专业版系统安装教程
  • opengl绘图
  • linux脚本case
  • easyui表格
  • 如何终止promise
  • jquery页面跳转的方法
  • js如何禁用按钮
  • [置顶] 安卓手电筒小程序
  • js怎么判断日期大小
  • python百分数运算怎么写
  • 重庆平均缴费指数查询
  • 一个人可以申请
  • 地税局下属单位
  • 公司欠税款,还不上,怎么办
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设