用户权限拦截

不同的用户看到不同的页面（后端做的，后端做的拦截）

在后端创建每个用户信息的时候都有一个leaval的权限属性，通过这个leaval来确定这个用户是一个adminy用户还是一个管理员用户，此时返回一个403状态码，我们可以通过这个状态码，来弹出一个用户权限不足的提示，402token失效

不同用户登录不同的页面（前后端一起做的）

1.不同用户返回不同的侧边栏

后端通过用户返回一个接口，这个接口里面显示侧边栏信息不同，

例如A用户，通过后端接口只返回下面的权限

import {
  // MailOutlined,
  // SettingOutlined,
  // AppstoreOutlined,
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
} from "@ant-design/icons";
export const menuArr =  [
  {
    key: "/home",
    icon: <UserOutlined />,
    label: "Home",
  },
  {
    key: "/banner",
    icon: <VideoCameraOutlined />,
    label: "banner管理",
  },
];

  return (
    <Menu
      theme="dark"
      mode="inline"
      onSelect={onSelect}
      defaultSelectedKeys={["1"]}
      items={menuArr}  //这个地方的menuArr就是后端的返回来的数据渲染页面，因此后端返回不同的数据，用户就会有不同的权限
    />
  );

上面这种方法只是让功能权限不在页面上显示，但是如果用户记住了路径信息的话，在地址上写入路径信息还是能够访问到的，因此在路由上还需要配置，也是后端给我们返回一个用户能访问的路径地址的数组，在路由渲染的时候，通过这个数组进行判断，如果这个数组中存在这个路由的话就可以通过路径访问到，如果没有的话就访问不到

例如：在app.js里面

首先后端给我们返回来了这样一个数组

const limitPathArr = ["/excel/2", "/echars/2"];

然后通过判断如果数组中有某个值得时候就渲染某个组件，如果没有的话就不渲染

例如：

 <Route
                      exact
                      path="/echars/1"
                      render={() => {
                        console.log(limitPathArr.includes("/echars/1"));
                        return limitPathArr.includes("/echars/1") ? ( //后端返回的数组中没有"/echars/1"，所以他会重定向到home去，因此可以与上面的页面显示与路由渲染不渲染节后使用，来实现用户权限
                          <Echars1></Echars1>
                        ) : (
                          <Redirect from="/echars/1" to="/home"></Redirect>
                        );
                      }}
                    ></Route>

总结：通过后端通过接口返回两个数据，一个是页面渲染显示的功能，一个是可以通过路由访问的地址列表，通过这两个实现不同用户展示不同的页面

不同用户显示不同的路由权限

思路：也是后端给你返回一个需要渲染按钮的的数组，先封装一个AuthBtn 组件，在这个组件里面写按钮的组件，按钮组件有个code属性，通过props传到他的父组件AuthBtn 中，在AuthBtn 组件里面判断，如果后端返回的数组中有按钮组件中的code,就让这个AuthBtn 组件的插槽显示，如果没有返回这个code的话，就没有，插槽，因此AuthBtn 组件里面的按钮组件也就不会显示

例子

组件AuthBtn 

import React from "react";
import { connect } from "react-redux"
const  btnAuth= ["good_del", "good_update"] //这个相当于后端返回的数组，这个数组来进行判断按钮是否显示
function AuthBtn(props) {
  
  const {  children, code} = props
  return (
    <>
    {
      btnAuth.includes(code) ? children : '' //通过插槽控制按钮组件显示不显示，要是code存在，因为有props.children，所以按钮组件就会显示
    }
    </>
  );
}
export default connect(state => state)(AuthBtn)

在用的时候

 <AuthBtn code="good_add"> //存在自己的props里面，通过在自己组件里面判断后端返回来的数组有没有这个good_add，如果有，就有插槽，所以下面的按钮也就会显示，要是没有的话，因为没有插槽，所以也就不会显示
 <Button type="primary">添加商品</Button>
 </AuthBtn>

用户权限总结：

#### 权限的拦截 （安全性）

1. 不同用户能看到不能的页面  （前端加后端来实现了）权限范围内的 导航数据 路径数据

   * 侧边栏点击 根据不同的权限用户 返回不同侧边栏 后端配合 是个假的

   * 地址栏 -> 路由的渲染  后端返回一个该用户的地址列表 根据地址来判断Route是否渲染

   * 组件内判断 先进入页面组件 在页面内部判断是否应该进入在跳走

2. 不同用户能得到不同的数据 优先级最高（后端的权限拦截）

   * 和前端关系不大，根据不同的返回码给出不同的提示（用户体验）

   * 402 token缺失  引导用户重新登录

   * 403 权限不足   只做提示

   * 500 服务端错误  只做提示

3. 按钮级别的权限

   * 后端返回按钮权限列表

   * 根据权限列表控制按钮渲染