Vue项目中使用路由导航守卫处理页面的访问权限

参考Vue-Router官方文档

Vue-Router导航守卫

效果展示

1、给需要登录状态才能访问的页面路由对象的 meta 中添加配置属性

{ // 小智同学name: 'user-chat',path: '/user/chat',component: () => import('@/views/user-chat'),meta: { requiresAuth: true }
},

2、通过路由拦截器统一校验

router.beforeEach((to, from, next) => {if (to.name === 'login' || !to.meta.requiresAuth) {return next()}if (store.state.user) {return next()}Dialog.confirm({title: '该功能需要登录，确认登录吗？'}).then(() => {next({name: 'login',query: {redirect: from.fullPath}})}).catch(() => {// on cancel})
})

Vue项目中使用路由导航守卫处理页面的访问权限相关推荐

vue项目中使用vant时tabbar遮挡页面解决方法
标题vue项目中使用Vant时tabbar遮挡页面解决方法单页面使用: 页面底部可以增加一个div,<div style="height: 5rem;"></d ...
【Vue】vue中的路由导航守卫(路由的生命周期)
文章目录全局前置守卫可选的第三个参数 `next` 全局解析守卫 router.beforeResolve 全局后置钩子路由独享的守卫组件内的守卫可用的配置 API 使用组合 API 完整的 ...
vue项目中，用iframe嵌套其他页面在IE浏览器打开空白而在谷歌打开正常的问题
问题在vue项目中,某个页面里面用iframe嵌套了另一个vue项目的一个页面,在谷歌浏览器中打开,iframe的内容正常显示:在ie浏览器中打开,iframe的内容是空白的,没有报错. 原因用的 ...
VUE项目中使用this.$forceUpdate()；解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题参考文章: (1)VUE项目中使用this.$forceUpdate();解决 ...
前端学习（1871）vue之电商管理系统电商系统之路由导航守卫控制页面访问权限
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
vue项目中处理左侧导航栏问题的分享
2019独角兽企业重金招聘Python工程师标准>>> 相信左侧导航栏大家都不陌生,几乎每个项目都会存在.以前用jquery做的时候,某些本不是什么问题的地方就突然变成阻碍了.下面就 ...
vue项目中解决路由重复点击报错问题
router.js中写入 import导入代码下面加入const prototypePush = VueRouter.prototype.pushVueRouter.prototype.push = ...
html2pdf vue,VUE项目中利用html2canvas和JsPdf实现页面转PDF并保证图片不会被切断
1.安装html2canvas和JsPdf //第一个.将页面html转换成图片 npm install --save html2canvas //第二个.将图片生成pdf npm install j ...
vue项目中跳转页面，页面从顶部开始
vue项目中采用路由机制,当页面进行跳转,滚轮的位置不会改变 mounted() {//设置滚动条指定document.documentElement.scrollTop=0},

Vue项目中使用路由导航守卫处理页面的访问权限

效果展示

Vue项目中使用路由导航守卫处理页面的访问权限相关推荐

最新文章

热门文章

Vue项目中使用 路由导航守卫 处理页面的访问权限

效果展示

Vue项目中使用 路由导航守卫 处理页面的访问权限相关推荐

最新文章

热门文章

Vue项目中使用路由导航守卫处理页面的访问权限

Vue项目中使用路由导航守卫处理页面的访问权限相关推荐