美文网首页
权限验证

权限验证

作者: 浅浅_2d5a | 来源:发表于2022-07-20 16:29 被阅读0次

访问main.js 这里调用了权限的js,
免重定向白名单['/login', '/auth-redirect']
每次进入页面时候都回进入到权限的路由拦截器,
点击登录按钮,用dispatch触发'user/login'的action,设置state中的token,设置Cookie中的token
在login文件夹下的index.vue中监听了$route,如果是由登出退到login页面,能获得重定向地址,网址为http://localhost:9528/#/login?redirect=%2Ficon%2Findex,没由重定向地址,跳转到‘/’首页
登录成功后,页面跳转到重定向地址或是首页

在走登录之前,没由hasToken,如果属于免重定向白名单,进入页面,否则到login并带上重定向网址 例如:next(/login?redirect=${to.path})

如果登录后,跳转网址是/login,跳转到首页。如果进入其他页 需要通过getInfo获取用户权限
store.getters.roles中是存储的权限

如果store.getters.roles && store.getters.roles.length > 0,说明之前已经调用过getInfo接口,存储过权限 else 通过 store.dispatch('user/getInfo') 拿到权限的接口数据,设置store中user的state中的属性

如果是admin登录roles= ["admin"],如果是editor登录roles= ["editor"],
在需要区分权限的路由配置中,配置了roles,例如:path为/permission,根目录控制admin和editor的权限,子路由,控制了admin的权限。
注: 如果路由配置中不设置roles,则表示此页不需要权限
permission.js中通过dispatch拿到用户权限,再结合路由配置,进行真正路由的生成,再由 router.addRoutes(accessRoutes) 让路由生效

// 设完路由,再次进入一次,设置replace,不留下历史记录
next({ ...to, replace: true })
// 如果getInfo 接口调用失败,通过dispatch('user/resetToken'),清空store中token 和 roles ,cookies中的token也清除,再次进入登录页面并且拼接重定向地址

//退出登录逻辑
store.dispatch('user/logout')
this.router.push(`/login?redirect={this.$route.fullPath}`)
logout这个action作用,清空token、roles、删除cookies的token, 重置路由resetRouter,作用自己封装

==================================上述是再route中写死的权限配置,还可以通过不同角色,走接口拿到动态路由tree,再拼接路由

===================================扩展 页面权限分类:用户级别权限、页面级别权限、按钮级别权限
用户级别权限:不同的用户,从接口返回不同的动态路由部分
页面级别权限:每个页面路由配置上设置roles:['admin','editor']
按钮级别权限:设置按钮上角色权限,如果该用户属于其中的角色,由按钮,用指令绑定权限。例如:
v-permission="editor"
v-permission="['admin','editor']"
如果不能是用指令的,例如el-tab-pane,可以用v-if绑定函数

按钮级别权限指令代码:

function checkArray(key) {
  let arr = ['1', '2', '3', '4']
  let index = arr.indexOf(key)
  if (index > -1) {
    return true // 有权限
  } else {
    return false // 无权限
  }
}

const permission = {
  inserted: function (el, binding) {
    let permission = binding.value // 获取到 v-permission的值
    if (permission) {
      let hasPermission = checkArray(permission)
      if (!hasPermission) {
        // 没有权限 移除Dom元素
        el.parentNode && el.parentNode.removeChild(el)
      }
    }
  },
}

export default permission

相关文章

  • 拦截器模式实践

    为操作验证权限 点击按钮——弹出权限验证框——输入用户名和密钥——立即验证/生成bean——验证通过——正真的点击事件

  • Laravel-表单验证

    独立验证类 权限验证方法 验证规则 抛出错误

  • sa-token 之权限验证

    权限验证 核心思想 所谓权限验证,验证的核心就是当前账号是否拥有一个权限码有:就让你通过、没有:那么禁止访问再往底...

  • PHP 权限管理 位运算

    最近在搞一个权限管理,就是通过位或运算来验证权限,来分享一下实现原理。 权限管理,核心就是权限分配和权限验证两点。...

  • 初识 Token

    最简单通用的权限校验模型: 验证是否合法。 验证是否有效。 验证 token 对应的权限。微信小程序中的令牌检验 ...

  • 权限验证

    访问main.js 这里调用了权限的js,免重定向白名单['/login', '/auth-redirect']每...

  • mongo-python

    1、用户无权限验证连接mongo 2、用户权限验证登陆连接mongo(1)注:有权限校验登陆最好选择这种方式,另一...

  • Django REST framework:Authentica

    一、概念 Authentication即验证,Permissions即权限。 Authentication验证是将...

  • 动态权限

    //经验证 //检查权限的操作 =========================================...

  • HBase分析之Ranger权限验证

    HBase源码分析之权限验证中讲过了自带的simple认证方式,Apache有个项目,也提供了权限验证,就是Ran...

网友评论

      本文标题:权限验证

      本文链接:https://www.haomeiwen.com/subject/iuweirtx.html