• vue-router导航守卫,限制页面访问权限


    在项目开发过程中,经常会需要登录、注册、忘记密码等,也有很多页面是需要登录后才能访问,有些页面是无需登录就可以访问的,那么vue是怎么来限制这些访问权限问题的呢?

    vue-router导航守卫的beforeEach方法做权限限制,了解更多导航守卫详情,请点击  这里  访问官方文档

    在main.js中使用:

    router.beforeEach((to, from, next) => {   // 使用钩子函数对路由进行权限跳转
    const role = localStorage.getItem('username');
      if ( !role && to.path !== '/login' && to.path !== '/register' ) {  // 如果用户不存在,并且访问的页面不是登录和注册,就前往登录页面
        next('/login');
      } else if ( to.meta.permission ) {  // 如果是管理员权限则可进入,这里只是简单的模拟管理员权限而已
        role === 'admin' ? next() : next('/403');
      } else {
     
      }
    })
     
    还有一种方法,是使用vue-router的重定向功能,实现路径的限制:
    在router的index.js中:
    export default new Router({
    routes: [
      {
        path: '/',
        redirect: '/home'  // 任何没有具体路径的访问,我都让它重定向到home主页,重定向在限制用户手动修改URL时误操作很管用
      },
      {
        path: '*',
        redirect: '/404'
      }
    ]
     
    vue-router权限控制我暂时了解的就是两种,如果还有其他的我会继续补充,希望能给你提供到帮助
     
  • 相关阅读:
    [XNA]2D图形概要(2D Graphics Overview)
    [WP7]WindowsPhone支持VS2010的开发工具出来了
    [WM]用双缓冲在CStatic上面画
    [读书]至理名言摘自你的灯还亮着吗
    无题!!
    Windows 8 Consumer Preview 中的快捷键
    aptana studio 汉化与安装 zencoding、配置
    jQuery常用焦点图,可做选项卡切换
    jQuery 导航点击变换样式
    原生JS:焦点图 左右滚动
  • 原文地址:https://www.cnblogs.com/wangqiao170/p/9072010.html
Copyright © 2020-2023  润新知