接口权限 (后端)

• token 使用jwt来创建token，返回给前端，前端在登录之后的接口请求中应该将token携带回后端，后端在检验token的合法性(jwt创建的token是可以自定义字段的)

const jwt = require('jsonwebtoken')

// sign用于生成token，666作为加密的私钥可以自行定义
function sign(option) {
  return jwt.sign(option, '666', {
    expiresIn: '1h' // 当前设定过期时间在xx之后
  })
}

// 新增代码
// isAdmin参数用于权限控制
let verify = (isAdmin) => (ctx, next) => {
  // 获取到前端传递多来的token
  let jwtToken = ctx.req.headers.authorization
  if (jwtToken) {
    // 校验token的合法性
    jwt.verify(jwtToken, '666', function(err, decoded) {
      if (err) {
        ctx.status=401
        ctx.body = {
          code: 1,
          message: 'token失效'
        }
      } else {
        if (isAdmin) {
          let { admin } = decoded
          if (admin) {
            next()
          } else {
            ctx.body = {
              status: 401,
              message: '你不是管理员!权限不够!'
            }
          }
        } else {
          next()
        }
      }
    });
  } else {
    ctx.status=401
    ctx.body = {
      code: 1,
      message: '请提供token'
    }
  }
}

module.exports = {
  sign,
  verify
}

路由权限 (前端)

• 通过在路由守卫中判断当前账号的权限是否达到，来决定页面是否可以跳转

router.beforeEach((to,from,next)=>{
  
  let userLever=window.localStorage.getItem('level')
  
  if (userLever>=to.meta.level) {
    next()
  }else{
    alert('权限不足')
  }
  
})

菜单权限 (前后端)

• 前端控制，使用v-if来隐藏权限菜单
• 后端控制(推荐) :后端通过接口返回菜单数据给前端展示

按钮权限 (前端)

• v-if 控制按钮能不能点
• 自定义指令 app.directive('noLevel',{ beforeMount(el,binding,vnode){ //指令第一次绑定到元素时调用 console.log(el,binding,vnode); }, mounted(el,binding,vnode){ //被绑定元素插入父节点时调用 console.log(el.parentNode.removeChild(el)); }, updated(el,binding,vnode){ //被绑定元素所在模板更新时调用 console.log('updated'); }, beforeUnMount(el,binding,vnode){ //指令与元素解绑时调用 console.log('beforeUnMount'); } })