React入门（十三）之权限

1、理解权限

最近在用react做一个后台管理系统的项目，后台管理系统那肯定少不了权限。相信权限这个词大家都清楚，就是不同用户所拥有的功能和级别不同。

• 比如说：

  在一个图书管理系统里，你只是普通用户，那么你可能拥有查看和搜索图书的权限；
  如果你是一般的管理员，那么可能拥有上架图书，修改图书的权限；
  如果你是老板，那么你可能拥有任命管理员的权限。

  不同的身份，行使不同级别的功能。这，就是权限。

2、后台管理系统里的权限

在后台管理系统中，权限分为功能级权限和数据级权限

• 功能级权限

  就是不同的账户登录后看到的页面和功能是不一样的；

• 数据级权限

  不同的账户拥有增删改查中的某一个或多个权限。

我们今天重点说一下项目中的功能级权限。

3、React项目实现功能级权限

就先说一说react项目里如何实现功能级权限吧！（我做的react项目）

3.1、实现思路（react）

由于本次项目使用了mock数据，所以也包括后端实现部分（不用mock数据的可以跳过后端实现部分）

1、mock数据中为每个用户添加不同的权限，即不同的路由
path(`后端部分`);
2、前端登录账户，发起请求；
3、后端拿到用户名和密码去验证，验证通过返回该用户的
路由path(`后端部分`)；
4、前端接收后端返回的路由path存储到本地（localStorage,
sessionStorage都可）；
5、在src路径下新建grants/index.js，将所有路由配置放在数组里，
并且在该文件封装并导出函数（用来筛选用户拥有的路由path）；
6、在导航组件中导入并调用该函数，获取用户拥有的路由配置；
7、遍历该数组，动态添加路由配置。

以上的思路虽然复杂，但是实现并不太难！

3.2、实现步骤

1）、修改mock数据

"loginadmin": [
    {
      "id": "0001",
      "username": "晓晓",
      "userpass": "123",
      "paths": [
        {
          "path": "/layouts/userlist"
        },
        {
          "path": "/layouts/commuinfo"
        },
        {
          "path": "/layouts/userstati"
        }
      ]
    }
]

类似如上的形式，如果要进行数据权限，可以再加个字段

"curd":"0011" //0011对应增删改查，1为有，0为无

温馨提示：修改完mock数据别忘了重启服务器哦！

2）、登录

async tologin(){
     let data = await loginAdmin(this.state.loginobj)
     // console.log('返回的data',data); 
     if(data.length!==0){
         //查到数据,存储token
         message.info('登录成功');
         localStorage.setItem('token',data.token)
         localStorage.setItem('paths',JSON.stringify(data.paths))
         localStorage.setItem('username',this.state.loginobj.username)
         this.props.history.push('/layouts')
     }else{
         //未查到数据
         message.info('登录失败');
     } 
 }

登陆成功后本地就存储了该用户的路由path:

3）、封装函数

src下新建grants/index.js，将所有路由配置按照以下格式存储，别忘了导入相应的组件

import Userlist from '../pages/Userlist/userlist'
import Commuinfo from '../pages/commuinfo/commuinfo'
import Userstati from '../pages/userstati/userstati'
import Merchanlist from '../pages/merchanlist/merchanlist'


let stores = [
    {   
        title:"用户列表",
        path: "/layouts/userlist",
        component:Userlist
    },
    {
        title:"通讯信息",
        path: "/layouts/commuinfo",
        component:Commuinfo
    },
    {
        title:"用户分析",
        path: "/layouts/userstati",
        component:Userstati
    },
    {
        title:"商户列表",
        path: "/layouts/merchanlist",
        component:Merchanlist
    }
]

还是在该文件下，定义并导出函数

//1、获取本地存储的权限path
//2、从stores(所有路由配置中筛选出当前登录用户的权限path)
export default () =>{
    let paths = JSON.parse(localStorage.getItem('paths'))

    let userpath = stores.filter(items=>(
        paths.some((item)=>(
            item.path == items.path
        ))
    ))
    
    return userpath; 
}

以上函数的返回值就是当前登录用户的路由配置（注意是路由配置，不再只是本地获取的path）

该函数的返回值：（多了component）

4）、遍历用户的路由配置

//1、导入该函数
import userpathsFn "../grants"

//调用该函数
let userpath = userpathsFn()

//3、遍历该函数返回值(这里我用了组件)
userpath.map((item,idx)=>(
   <Menu.Item key={idx}>
       <NavLink to={item.path} activeClassName="tochange">
           {item.title}
       </NavLink>
   </Menu.Item>
))

4、Vue项目实现功能级权限

vue项目虽然没用过权限，但是思路都是大同小异。

4.1、实现思路（vue）

思路和react其实差不多，只不过使用vue中的使用addRoutes方法来动态添加路由配置。

4.2、实现步骤

1）、先修改原本的路由配置，只留下一级路由；

import Vue from 'vue';
import VueRouter from "vue-router";

//把vue-router安装到Vue。
Vue.use(VueRouter); 

// 创建vue-router对象
let router = new VueRouter({
    routes: [{
            path: "/",
            redirect: "/index"
        },
        {
            path: "/index",
            component: Index
        }
    ]
});

export default router;

2）、登陆成功，后端返回用户权限path,前端保存在本地。并且使用vue-router对象的addRoutes方法把该路由配置动态添加到路由对象里。同时，把该路由配置保存到sessionStorage里（防止前端刷新后丢失路由配置）。

	let data = await getUserPath()	
	//roles是引入的所有路由配置
    let roles = res.data[0].data;
    let currRoutes = this.allRoutes.filter(item => {
        return roles.some(obj => obj.path == item.path);
    });
    //把获取到的权限保存到sessionStorage中
    sessionStorage.setItem("roles", JSON.stringify(roles));
    //把获取到的权限，动态增加到vue-Router对象里
    this.$router.addRoutes(currRoutes);
    this.$router.push("/index");
);

3）、前端在“App.vue”里读取保存的路由配置，同时使用vue-router对象的addRoutes方法把该路由配置动态添加到路由对象里。这样做也是为了刷新页面时可以在App获取当前用户的路由权限。

created() {
    this.roles = JSON.parse(sessionStorage.getItem("roles"));
    //根据后端返回的权限，返回该用户的路由配置
    let currRoutes = this.allRoutes.filter(item => {
          return this.roles.some(obj => obj.path == item.path);
        });
    this.$router.addRoutes(currRoutes);
    
}