路由权限

路由权限是后台管理系统中，不同的身份可以访问不同的路由，这就要我们后端小伙伴通过查N张表去把该用户的信息以及对应的权限给查找出来，返回给我们前端的小伙伴，前端对数据进行解析来展示我们用户对应的路由表

1.后端权限（简单权限获取）

后端我是通过express来写了一个简单的服务，在后端对模拟的数据进行简单的 pid 以及其id 进行判断，返回给我们前端的小伙伴

app.ts

import express, { Application } from 'express'
import bodyParser from 'body-parser'
import { route, user,IRoute } from './index'

const app: Application = express()
const PORT: number = 8081

interface IBody {
   uid: number
}

app.use( bodyParser.urlencoded( {extended: true } ))
app.use( bodyParser.json() )

app.post( '/user_route_list', (req, res)=>{
   const { uid }: IBody = req.body

   user.forEach(user => {
      if( uid == user.id ){
         let arr: IRoute[] = []
         user.auth.forEach(item => {
            route.forEach( ele => {
               if( ele.id == item ){
                  arr.push( ele )
               }
            })
         })
         res.status(200).send({
            data: arr
         })
      }
   })
})


app.listen( PORT ,()=>{
   console.log( 'http://localhost:8081' ); 
})

user.ts

模拟用户表

export interface IUser{
    id: number,
    username: string,
    auth: number[]
}

export const user =  <IUser[]> [
    {
        id: 1,
        username: 'zhangsan',
        auth: [1,2,3,4,5,6,7]
    },
    {
        id: 2,
        username: 'lisi',
        auth: [1,3,6]
    },
    {
        id: 3,
        username: 'wangwu',
        auth: [2,4,5]
    },
]

route.ts

模拟权限表

export interface IRoute {
    id: number,
    pid: number,
    path: string,
    name: string,
    title: string,
}

/**
 * Course 1
 *  courseOpre 2
 *      ASHDIKO 3
 *          ZSDHJCFOVI 4
 *              SKAJFOPK  5
 *                  ASOHJFPOASJ 6
 *  YINJINI 7
 */

export const route =  <IRoute[]>[
    {
        id: 1,
        pid: 0,
        path: '/course',
        name: 'Course',
        title: 'Course'
    },
    {
        id: 2,
        pid: 1,
        path: '/courseOpre',
        name: 'CourseOpre',
        title: 'CourseOpre'
    },
    {
        id: 7,
        pid: 1,
        path: '/YINJINI',
        name: 'YINJINI',
        title: 'YINJINI'
    },
    {
        id: 3,
        pid: 2,
        path: '/ASHDIKO',
        name: 'ASHDIKO',
        title: 'ASHDIKO'
    },
    {
        id: 4,
        pid: 3,
        path: '/ZSDHJCFOVI',
        name: 'ZSDHJCFOVI',
        title: 'ZSDHJCFOVI'
    },
    {
        id: 5,
        pid: 4,
        path: '/SKAJFOPK',
        name: 'SKAJFOPK',
        title: 'SKAJFOPK'
    },
    {
        id: 6,
        pid: 5,
        path: '/ASOHJFPOASJ',
        name: 'ASOHJFPOASJ',
        title: 'ASOHJFPOASJ'
    },
]

2.前端权限

1.前端通过axios来获取到后端的数据

简单封装axios

import axios, { AxiosRequestConfig, AxiosResponse } from "axios";

const instance = axios.create({
    baseURL:'/api',
    timeout: 5000
})


instance.interceptors.request.use( 
    (req: AxiosRequestConfig) => {
        return req
    }
)

instance.interceptors.response.use(
    (res: AxiosResponse) => {
        return res.data.data
    }
)

export default instance

涉及跨域问题，要在vite.config.ts中配置代理，如果是Vue的话就在vue.config.js中配置

  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8081',
        changeOrigin: true,
        ws:true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    }
  }

2.获取到数据将数据通过递归的方式变成对应的路由规则

这时候有小伙伴就会问，为啥不让后端直接给我们返回正确的规则呢？

其实这个在公司讨论需求通过的情况下，也是可以叫后端的同学给你正确的规则的，前提是要后端同学要懂前端的路由规则或者后端同学把路由规则给弄懂这时候就可以返回正确的数据，否则则要咱自己写一个递归去处理对应的数据

这是后端同学给我们返回的数据

我们需要把数据做进一步的处理，要变成对应的路由规则

// 类型
import { IRoute } from "@/store/state";

export function ROUTETREE( routeList: IRoute[] ){
    const parents = routeList.filter( (routeInfo: IRoute) => routeInfo.pid === 0 )
    const children = routeList.filter( (routeInfo: IRoute) => routeInfo.pid !== 0 )

    dataToTree(parents, children)

    return parents
}

// 递归函数
function dataToTree( parents:IRoute[] , children:IRoute[] ){
    parents.map( parent => {
        children.map( (child, index) =>{
            if( parent.id === child.pid ){
                let _children:IRoute[] = JSON.parse(JSON.stringify(children))
                _children.splice( index,1 )
                dataToTree( [child], _children)
                if( parent.children ){
                    parent.children.push( child )
                }else{
                    parent.children = [child]
                }
            }
        })
    })
}

路由权限解析（前后端全解析）