vue 设置路由的登录权限的方法

 更新时间:2018年07月03日 10:14:22   作者:learnoff  
这篇文章主要介绍了vue 设置路由的登录权限的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

index.js

将需要登录权限的路由设置meta属性

meta:{requireAuth:true}, 

main.js

在main.js内直接写对路由的验证

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限
    if (sessionStorage.getItem("access_token")) { // 判断当前的token是否存在
      next();
    }
    else {
      next({
      path: '/manage',
      query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由
    })
    }
  }
  else {
    next();
  }
});

总结

以上所述是小编给大家介绍的vue 设置路由的登录权限的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue子页面控制父页面刷新问题

    vue子页面控制父页面刷新问题

    这篇文章主要介绍了vue子页面控制父页面刷新问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • Vue MVVM模型与data及methods属性超详细讲解

    Vue MVVM模型与data及methods属性超详细讲解

    MVVM旨在利用WPF中的数据绑定函数,通过从视图层中几乎删除所有GUI代码(代码隐藏),更好地促进视图层开发与模式其余部分的分离,这篇文章主要介绍了Vue MVVM模型与data及methods属性
    2022-10-10
  • vue实现输入框只允许输入数字

    vue实现输入框只允许输入数字

    在vue项目中,输入框只允许输入数字,现将自己使用的一种方法记录,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2023-11-11
  • vue项目动态设置页面title及是否缓存页面的问题

    vue项目动态设置页面title及是否缓存页面的问题

    这篇文章主要介绍了vue项目动态设置页面title及是否缓存页面的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • vant toast 关闭栈溢出问题及解决

    vant toast 关闭栈溢出问题及解决

    这篇文章主要介绍了vant toast 关闭栈溢出问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 基于vue+elementPlus的动态导航标签栏tabs具体过程

    基于vue+elementPlus的动态导航标签栏tabs具体过程

    这篇文章主要给大家介绍了关于基于vue+elementPlus的动态导航标签栏tabs的相关资料,本文主要详述了在系统上添加导航标签栏功能时,首次尝试的过程,并且希望能为同行提供一个小demo,需要的朋友可以参考下
    2024-10-10
  • vite+vue3代码风格校验及格式化方式

    vite+vue3代码风格校验及格式化方式

    这篇文章主要介绍了vite+vue3代码风格校验及格式化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue中的Object.freeze() 优化数据方式

    vue中的Object.freeze() 优化数据方式

    这篇文章主要介绍了vue中的Object.freeze()优化数据方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue.js创建Calendar日历效果

    Vue.js创建Calendar日历效果

    这篇文章主要为大家详细介绍了Vue.js创建Calendar日历效果的过程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 手动挂载Vue3.0组件到DOM节点的方法

    手动挂载Vue3.0组件到DOM节点的方法

    在VUE应用中,经常会使用一些非vue实现的js库,这些js库可能要求外部传入一些界面DOM节点,本文主要介绍了手动挂载Vue3.0组件到DOM节点的方法,感兴趣的可以了解一下
    2024-08-08

最新评论