react实现路由身份验证

在react做后台管理的时候，经常会使用到身份鉴权，例如管理员和普通用户的权限不一致，那么该如何判断那？

第一步首先就是需要知道登陆的是管理员还是普通用户，当然这些信息一般后台会返回给我们，假如是管理员登陆，我们就在localstorage存储个admin，普通用户是就存储个user

第二步建立路由表设置每个路由的权限

var routers = [
    {
        'path': '/',
        'exact': true,
        'component': Home,
        title: '首页'
    },
    {
        'path': '/product',

        'component': Product,
        title: '商品',

        children: [
            {
                'path': '/product',
                'component': Product,
                'exact': true,
                title: '商品管理',
                role: ['admin'],
            },
            {
                'path': '/product/list',

                'component': ProductList,
                role: ['admin','user'],
                title: '商品列表',
            }

        ]
    },
]

例如以上路由，首页是公共路由，没有设置role权限，说明不用验证身份，商品管理只能是管理员才能访问的，商品列表是都可以访问的，也不用设置role

role字段规定了那些用户可以访问，自己可以添加多个权限，下面是如何判断当前用户是否有权限，这里的思路是遍历路由，当前路由存在了role字段，说明需要验证身份，那么就判断用户的身份是否在role中，如果在返回当前路由，如果不在则返回403页面

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, Switch, Redirect } from 'react-router-dom'

function Not() {
    return <h1>403</h1>
}
//循环遍历路由
function renderRouter(routers) {

    return routers.map((route, index) => {

        //利用递归判断当前是否存在子路由，如果存在则继续循环
        if (route.children) {

            return (
                <Route component={route.component} path={route.path} key={index} title={route.title}>
                    {renderRouter(route.children)}
                </Route>
            );
        }
        //如果身份验证函数返回了大于等于0，就代表此用户有权访问这个路由，返回当前路由
        if (filterAuth(route) >= 0) {
            return (

                < Route path={route.path} key={index} component={route.component} exact={route.exact} title={route.title} ></Route >

            )
        } else {
        //返回了-1则代表在role中没有查找到此权限，说明用户没有权限，则返回403页面
            return (

                < Route path={route.path} key={index} component={Not} exact={route.exact} title={route.title} ></Route >

            )
        }

    })

}
//用来判断当前用户是否有权限和当前路由是否需要身份验证
//返回-1代表role中没有查找到此身份，说明没有权限，其他则是代表有权限
function filterAuth(routers) {
    //判断当前路由是否设置了权限，如果没有设置说明当前路由是公共路由
    if (routers.role) {
        return routers.role.indexOf('user')
    } else {

        return 1;
    }
}
export default renderRouter;