①先在我们的登录页面存储一个登录数据
// 登录成功时保存一个登录状态; 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登录权限
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“Vue路由守卫及页面登录权限控制的设置方法(两种)”评论...
更新动态
20240517
20240517
- 【驰放沙发(J)】VA-2024-WinterTime,Vol.12(FLAC)
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 韩红《青藏高原+红+韩红精选集》3CD[WAV分轨][1.7G]
- 高胜美《经典金选》1991-1994 4CD[WAV整轨][1.9G]
- 【迷幻电音】AstralWaves-2023-Singles,RemixesandRaritiesII(FLAC)
- 中唱唱片群星《好歌珍藏-游子情深》2CDWAV
- 张国荣.2011-极品天碟LPCD45II(雨果版)【环球】【WAV+CUE】
- 张学友《醒着做梦》[DFF][1.1G]
- 刘惜君 《如我》[WAV分轨][403M]
- 白玛多吉《梦》限量1:1母盘直刻[低速原抓WAV+CUE][508M]
- 魏金栋-金歌新曲-梦里全是桂花香2CD[天凡之音][WAV+CUE]
- 鲛岛有美子-樱花赋HQCD[天龙][WAV+CUE]
- [In-Akustik7506]ReferenceSoundEdition-GreatWomenOfSong(2014)HQCD[WAV+CUE]
- 日本EMI超级名盘TOGE-11035-36BeethovenFidelio-Furtwngler
- 宝丽金50周年2010《古典篇》3CD限定盘[低速原抓WAV+CUE]