vue限制实现不登录无法进入其他页面
更新时间:2024年01月05日 09:18:18 作者:小跳不会Coding
本文主要介绍了vue限制实现不登录无法进入其他页面,vue限制不登录,通过url进入其他页面强制回到登录页面;已经登录的情况下,不可以再进入登录界面,感兴趣的可以了解一下
vue限制不登录,通过url进入其他页面强制回到登录页面;已经登录的情况下,不可以再进入登录界面
参数说明:
- to: Route: 即将要进入的目标(路由对象)
- from: Route: 当前导航正要离开的路由
- next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
1.先在router下的index.js添加 meta:{requireAuth:true},如下:
{ path: '/data', name: 'data', component: data, meta:{requireAuth:true} },
2.然后在main.js添加如下代码:
router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 if(localStorage.getItem('userInfo')){ //判断本地是否存在access_token next(); }else { if(to.path === '/login'){ next(); }else { alert('请先进行登录!') next({ path:'/login' }) } } } else { next(); } /*如果本地 存在 token 则 不允许直接跳转到 登录页面*/ if(to.fullPath == "/login"){ if(localStorage.getItem('userInfo')){ alert('您已经登录了,如果想要登录其他账号,请先退出当前账号!') next({ path:from.fullPath }); }else { next(); } } });
或者是:
router.beforeEach((to, from, next)=> { let userInfo = localStorage.getItem('userInfo') let list = ['login','checking','register','phoneLogi','chat','GroupSharing','new_file','videoChat',]//多个路由 if (userInfo || list.indexOf(to.name) !== -1) { next() } else { next({ name:'login' }) } // next() })
到此这篇关于vue限制实现不登录无法进入其他页面的文章就介绍到这了,更多相关vue限制登录内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Element DateTimePicker日期时间选择器的使用示例
这篇文章主要介绍了Element DateTimePicker日期时间选择器的使用示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-07-07vue自定义加载指令v-loading占位图指令v-showimg
这篇文章主要为大家介绍了vue自定义加载指令和v-loading占位图指令v-showimg的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-08-08通过vue-cli来学习修改Webpack多环境配置和发布问题
这篇文章主要介绍了随着Vue-cli来'学'并'改'Webpack之多环境配置和发布的相关知识,本文将会根据一些实际的业务需求,先学习vue-cli生成的模版,然后在进行相关修改,感兴趣的朋友一起跟着小编学习吧2017-12-12
最新评论