权限配置过程

• src/app.tsx的代码会先执行
  首先在app.tsx文件中导出 getInitialState 方法(可以加async)
  就开启了@umijs/piugin-initial-state插件集
  它的返回值是一个对象

export const getInitialState = async () => {
    console.log("getInitialState");
     return {
      role: "",
    }
}

添加本地存储后

export const getInitialState = async () => {
  //   console.log("getInitialState");
  try {
    const userInfo = JSON.parse(localStorage.getItem("userInfo"))
    return userInfo || {
      role: ""
    };
  } catch (error) {
    console.log(error);
    return {
      role: ""
    }
  }
}

• 在执行src/access.ts
  默认抛出一个函数，它接收到的参数是app.tsx中方法的返回值
  return {变量：布尔值}

export default function (initialState) {
    console.log(initialState);
    // 例如
    return {
        canUser: role === "admin"
    }
}

回到路由文件router.ts给需要控制视图权限的路由添加access属性默认值显示就给返回的那个变量

{
        exact: true,
        name: "用户管理",
        path: "/userMent",
        component: "@/pages/UserMent",
        
        access:"canUser",//以此控制视图是否显示

        icon: "UserOutlined"
    },

• 与登录状态连接时
  在登录页 获取到useRequest数据后
  使用useModel重新设置access.ts抛出函数的初始值

const history = useHistory()
  const { setInitialState } = useModel("@@initialState")
  const onFinish = async (user:string,pwd:string) => {
    const data = await run({
      name: user,
      password: pwd
    })
    console.log(user,pwd);
    setInitialState(data)
   // 进而进行本地存储或者跳转页面操作
    localStorage.setItem('userInfo', JSON.stringify(data))
    history.push('/')

3I7W4F)A(OQT4`9O_)$YKYW.jpg

面试如果问用户权限怎么配置？

点击登录获取到token和用户信息，然后根据用户信息判断侧边栏是否显示

• 如何实现 ？通过useModel可以返回一个 setInitialState(data)方法，权限会重新获取初始规则 然后配置路由时结合access实现视图是否显示