vue中使用'&' ， '&&'运算实现前端的权限控制

首先这个是一个关于前端vue的通过前端实现的权限控制问题

权限在后台管理系统中，有很大的占比，是一个很重要的部分，首先说一下什么是‘&’运算，‘&’运算就是

一种逻辑运算，相对的有比如‘|’，‘^’等，‘&’运算基本可以理解表示为if(){},那么这不就是很简单的

if判断来实现前端的权限吗，我觉得也是

首先这个是router页面的代码：

import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'
import Permissions from './permissions'

import allPermission from './allPermission'

Vue.use(Router);
export let routerJson = {
  mode: 'history',
  base: '/company',
  routes: [
    {
      path: '/:companyCode',
      component: () => import('@/components/container'),
      children: [
        {
          path: 'login',
          name: 'login',
          component: () => import('@/components/login/login')
        }
      ]
    }
  ]
};

let router = new Router(routerJson);
router.beforeEach((to, from, next) => {
//console.log('可以查看登录')
  if (to.name == 'login') {
    next();
    return;
  }
  if ( !store.state.security.userid ) {
    store.dispatch({type: 'security/currentUser'}).then(data => {
      // console.log('登录未失效');
      if ( data.status === 404 ) {
        next(`/${store.state.companyCode}/login`) ;
      }
      else
        return allPermission.checkPermissions(to, from, next);
    }).catch(e => {
      next(`/${store.state.companyCode}/login`);
      return;
    });
    return;
  }
  else {
  }
  return allPermission.checkPermissions(to, from, next);
});


export default router

分析一下，前面的import很简单，就是引入你需要的模块，然后接下来是你的router，如果你并不需要base来判断这个表示你这个是什么方向的你可以选择去掉他的引入，用你常规的router即可，接下来的

router.beforeEach((to, from, next) =>{
//function
}

这个则是，每次跳转路由之前需要做路由守卫。路由守卫，你可以点击查看你具体的路由守卫，
既每一次只要有关路由跳转即会进入的方法，这个方法有三个参数，to,from ,next，都是形参，是并不需要我们传入具体值的，由vue自动提供，我们在这个基础上，即可做出第一步判断，他是不是去到登录页面，如果是，无条件放行，如果不过，则需要开始判断是否需要新的判断了，这里需要我们引入另一个判断。当然你可以选择两个js写在一起，这里我分开了，
// 以下代码为allPermission.js内内容

/**
 * @Description: 权限校验
 * @author lxy
 * @date 2019/09/23 11:09:57
*/

//权限校验

import store from "../store";

export const hasPermission = function(permission) {
  if(permission && permission.length == 2){
    // console.log('路由跳转时：' permission);
    return (store.state.security.userpermissions[permission[0]] & permission[1]) > 0
  }
  return true
};

const checkPermissions = function (to, from, next) {
  if(to.meta && hasPermission(to.meta.permissions)){
    next();
    return;
  }
  if(to.meta && (!to.meta.permissions || to.meta.permissions.length < 2)){
    next();
    return;
  }
  // next(`/${store.state.companyCode}/this_index/FORBEADEN`);
  next();
  return;
};

export default {
  hasPermission,checkPermissions
}




首先介绍一下这个页面需要的东西，首先，vuex，这个可能有很多人不愿意使用，甚至连官方都不是那么

推荐（你能不使用就不使用）。但是由于这里需求是后台管理，便于数据整合，且数据量较多，所以会有这么一个

东西，store.state.security.userpermissions[permission[0]] & permission[1]， 这里的&运算代表的意思是，

我在路由跳转的时候，使用vuex内的一个函数，这个函数会请求一次接口，这个接口提供的数据为，

1，判断是否有这个账号，2，判断是否登录，3，判断具体权限 ， 当然，这里的权限是以数组形式存入的，

比如：user:[8,8,8,8]，达标他有第一级4个菜单权限以及前四个菜单的1，2，4，等权限，既是3个小页面

这里的判断条件为 1&user[0] ， 2&user[1] ……8&user[7] , 为1即为有这个权限，为0则无，
这里的意思即为，请求回来的数据中的权限数据permission[0]与现有的permission[1]进行比较，
如果大于0，即为有进入这一步的权限，既是你点击要进入的下一个路由或者页面（当然，如果你对页面的内容有
把控，你也可以将这个权限直接提入到页面中）。
接下来第二个方法 const checkPermissions = function (to, from, next) {} 则是使用第一个方法，将router/index.js
内的路由守卫，的to ,from ,next 带入此函数，然后使用hasPermission()判断即可，
那既然如此，我们前端就需要存入权限列表了，这个说起来并不是很复杂，接下来我提供简单的列子
 以下代码即为permissions内内容。

module.exports = {
    // 列1
    STAT:{
        RANK: [0, 1],// 子页面1
        ORG: [0, 2],// 子页面2
        USER: [0, 4]// 子页面3
    },
    // 列2
    COURSR:{
        VIEW: [1, 1],// 子页面3
        MGT: [1, 2],// 子页面3
        USER: [1, 4]// 子页面3
    },

}

当我们请求到后台数据，即可将权限数组和权限js实现对比，通过&运算，判断我们的权限是否足够（当然看起来很笨）

这样就能链接起来了，默认接口。查询登录状态 -》 返回权限数组 -》 对比权限数组 -》 路由守卫跳转至指定页面

（是否进入下一页或进入403无权限页面，或者直接隐藏不进入此页面）（当然你也可以使用v-if来使

你的组件不进行渲染）

这只是一个比较笨的方式，通过前端来实现我们的权限判断，并看起来稍微安全一点的样子