引言

最近在写react-redux的后台管理系统，我觉得权限管理挺重要的，在此总结一下。

大致流程

• 配置axios，解决代理以调用接口获取数据
• 用户登陆调用接口，获取传入token以允许登陆，存储token
• 在登陆时，收集用户信息(身份roles)存储以计算出权限
• 路由分类(静态、动态)拿着用户身份和所有路由去计算出accessRoutes(可进路由)
• 通过accessRoutes遍历出每一个route渲染到菜单栏中
• 调整细节，路由定向，意外情况

解决代理

因为同源策略的原因，代理是们非常有必要的，否则会产生跨域问题。

安装axios

cnpm i axios@0.27.2 -S

具体代码如下

import axios from 'axios'
import {
    message,
    Modal
} from 'antd'
import {
    ExclamationCircleOutlined
} from '@ant-design/icons'
import store from '@/store'
import {
    resetUser
} from '@/store/actions'
const {
    confirm
} = Modal

// 为了解决调接口遭遇同源策略的阻塞，这里“前端项目调用当前端口上的接口”
const baseURL = 'http://localhost:8080'
const version = '/api/react'

// 创建axios实例
const service = axios.create({
    baseURL: baseURL + version,
    timeout: 5000
})

// 添加请求拦截器
service.interceptors.request.use(
    config => {
        // 添加Token
        config.headers.Authorization = localStorage.getItem('token')
        return config
    },
    error => {
        console.log(error) // for debug
        return Promise.reject(error)
    }
)

// 添加响应拦截器
service.interceptors.response.use(
    response => {
        // 如果代码走到这里，HTTP状态码=200
        const res = response.data
        console.log('----响应拦截器', res)
        // 对业务状态码进行判断
        if (res.err !== 0) {
            // 如果业务状态码不等于0，表示业务失败，就把后端的反馈信息弹出来。
            message.error(res.msg || '入参有误')

            // 当Token过期或者Token是伪造的，要求重新登录。
            if (res.err === -1) {
                // 登录重新登录
                confirm({
                    title: '当前你的登录已失效',
                    icon: < ExclamationCircleOutlined / > ,
                    content: '请重新登录',
                    okText: '重新登录',
                    // 隐藏取消按钮，要求必须重新登录
                    cancelButtonProps: {
                        style: {
                            display: 'none'
                        }
                    },
                    onOk() {
                        store.dispatch(resetUser())
                    }
                })
            }
            return Promise.reject(new Error(res.message || 'Error'))
        } else {
            return res.data
        }
    },
    error => {
        console.log('err' + error)
        return Promise.reject(error)
    }
)

export default service