没有合适的资源?快使用搜索试试~ 我知道了~
Vue路由守卫及页面登录权限控制的设置方法
4 下载量 184 浏览量
2021-01-08
13:26:29
上传
评论
收藏 41KB PDF 举报
温馨提示
试读
1页
Vue路由守卫及页面登录权限控制的设置方法①先在我们的登录页面存储一个登录数据② 添加路由守卫方法一: 直接在路由中添加方法二:当我们使用的是export default 方法时可以在main.js中添加 router.beforeEach((to, from, next) => { })方法。③ 在路由当中添加自定义字段requireAuth,判断当前路由是否需要登录。④ 在路由守卫中添加我们自己的代码逻辑。 ①先在我们的登录页面存储一个登录数据 // 登录成功时保存一个登录状态; sessionStorage.setItem(flag, 1); ② 添加路由守卫 方法一: 直接在路由
资源详情
资源评论
资源推荐
Vue路由守卫及页面登录权限控制的设置方法路由守卫及页面登录权限控制的设置方法
Vue路由守卫及页面登录权限控制的设置方法路由守卫及页面登录权限控制的设置方法①先在我们的登录页面存储一个登录数据② 添加路由守卫方法一: 直接在路由
中添加方法二:当我们使用的是export default 方法时可以在main.js中添加 router.beforeEach((to, from, next) => { })方法。
③ 在路由当中添加自定义字段requireAuth,判断当前路由是否需要登录。④ 在路由守卫中添加我们自己的代码逻辑。
①先在我们的登录页面存储一个登录数据先在我们的登录页面存储一个登录数据
// 登录成功时保存一个登录状态;
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();
}
})
作者:钱不多啊
weixin_38698860
- 粉丝: 4
- 资源: 912
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0