Vue路由守卫及页面登录权限控制的设置方法(两种)
更新时间：2020年03月31日 15:25:01 作者：钱不多啊
这篇文章主要介绍了Vue路由守卫及页面登录权限控制的设置方法,本文通过实例代码通过两种方法给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
①先在我们的登录页面存储一个登录数据
// 登录成功时保存一个登录状态；
sessionStorage.setItem("flag", 1);
② 添加路由守卫
方法一： 直接在路由中添加
const router = new VueRouter({ ... })
// 路由守卫
router.beforeEach((to, from, next) => {
// ...
})
方法二：当我们使用的是export default 方法时可以在main.js中添加 router.beforeEach((to, from, next) => { }）方法。
const Recruit = resolve => require(['../components/common/main/index.vue'], resolve);
export default new Router({
routes: [
// 登录
{
path: path.login.path,
name: path.login.path,
component: Login,
},
.........
③ 在路由当中添加自定义字段requireAuth，判断当前路由是否需要登录。
下图中1是设置多权限时的设置方法，下图中2是单权限设置方法
④ 在路由守卫中添加我们自己的代码逻辑。
// 路由守卫
router.beforeEach((to,from,next)=>{
let flag = sessionStorage.getItem('flag ')
if(to.meta.requireAuth == true){ // 需要登录权限进入的路由
if(!flag){ // 获取不到登录信息
next({
path: '/login'
})
}else{ // 获取到登录信息，进行下一步
return next();
}
}else{ // 不需要登录权限的路由直接进行下一步
return next();
}
})
总结
到此这篇关于Vue路由守卫及页面登录权限控制的设置方法的文章就介绍到这了,更多相关vue 路由守卫页面登录权限内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
随着用户体验要求的不断提升,快捷键的处理也成为了提高用户操作效率的一个重要方面,本文将深入探讨如何在 Vue 3 中高效地处理快捷键,希望对大家有所帮助2024-11-11
这篇文章主要介绍了Vue 集成 storybook的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了vue 将多个过滤器封装到一个文件中实现方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2020-09-09
这篇文章主要介绍了vite+vue3项目中svg图标组件封装的过程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
Vue-element-admin 导出json和导入json文件的方法
这篇文章主要介绍了Vue-element-admin导出json和导入json文件,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue对象的深度克隆方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
DeepSeek 助力 Vue 开发丝滑的表单验证Form Validation功能
文章介绍了如何使用Vue3的组合式API创建一个表单验证组件,并提供了详细的代码示例,组件支持双向绑定、自定义验证规则、样式和布局等功能,还涵盖了组件的调用示例、路由配置和页面展示入口2025-02-02
vue3+element 分片上传与分片下载功能实现方法详解
这篇文章主要介绍了vue3+element 分片上传与分片下载功能实现方法,结合实例形式详细分析了vue3+element 分片上传与下载相关实现技巧与操作注意事项,需要的朋友可以参考下2023-06-06
在vue移动端项目中经常遇到这样的需求,对一些上传的附件可以点击之后在线预览,所以下面这篇文章主要给大家介绍了关于vue3中各种类型文件进行预览功能的相关资料,需要的朋友可以参考下2021-09-09
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
这篇文章主要介绍了vue-cli3.0如何使用CDN区分开发、生产、预发布环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
最新评论