Hi, I’m Chocolate.

Probably have no update the article for more than a month, recently is a little bit lazy, on the other hand this time shenzhen outbreak repeatedly, the home office for three weeks, you learned that occupy the home for the first still feel pretty good, but after the state is not very good, also hope that the disease in the past, early on weekdays or work in a company is better, at home, work efficiency is not high, Always easily distracted.

Although most of us communicate online at work, sometimes we still go to the workstation to communicate. After we stay at home, online communication is also a problem. Take the permission management system we have been working on for a month for example.

Analyze the requirements

How to say, this management system has been done for more than a year, the old project is constantly iterating, but before the product design did not consider the introduction of authority in the future, some functions are relatively scattered, generally what needs will be superimposed on the above functions. Resulted in the forced access permissions on the front end of huge workload, routing, historical data processing, buttons, permissions, page under the permissions TAB, data processing, the introduction of the new role management, personnel and role bindings, functions and authority binding, and so on, this month, is almost looked at all the code logic, then the change the change.

Front-end UI framework

This system is an old one. The previous UI was developed by using Material – UI. As for the open source framework provided by Google, I found that some interactions were not comfortable and the style was still different from that in China. So we have a new UI, which is and Pro, and we wrote an article about it before, and it’s been well read.

Since the introduction of ANTD Pro, I started all kinds of reconstruction work, and combed through the previous interaction logic during the process. The amount of code also increased gradually, and the responsibility increased accordingly. After all, if there were some logic problems online, I would still be asked.

Button Permission Problem

In fact, ANTD Pro has given permission to implement the scheme, but also provides related hook use, example is as follows:

// src/access.ts
export default function (initialState) {
  return {
    canReadFoo: true.canUpdateFoo: () = > true.canDeleteFoo: (data) = >data? .status <1.// Define your own authentication functions based on service requirements
  };
}
Copy the code

Example of permission control within a page:

import React from 'react';
import { useAccess, Access } from 'umi';

const PageA = (props) = > {
  const { foo } = props;
  const access = useAccess(); // Access instance members: canReadFoo, canUpdateFoo, canDeleteFoo

  if (access.canReadFoo) {
    // Any operation
  }

  return (
    <div>
      <Access accessible={access.canReadFoo} fallback={<div>Can not read foo content.</div>}>
        Foo content.
      </Access>
      <Access accessible={access.canUpdateFoo()} fallback={<div>Can not update foo.</div>}>
        Update foo.
      </Access>
      <Access accessible={access.canDeleteFoo(foo)} fallback={<div>Can not delete foo.</div>}>
        Delete foo.
      </Access>
    </div>
  );
};
Copy the code

At the same time, hook is provided as follows:

const Button=() = >{
   const  access =  useXX();
   // Permission processing
   return <Button/>
}
Copy the code

It still smells good. You can just use it, but…

Our system was not completely in accordance with ANTD Pro before, in short, it was quite messy, so we learned from the ideas, and implemented a layer of access and useAccess by ourselves.

Tooltip tooltips for buttons, hidden or grayed buttons, TAB page display and hide, etc., so you can see how much demand there is for the product.

Of course, it’s not an easy way to do it yourself, and you’ll find that some judgment conditions are needed in the process of doing it, but the trouble is that we have two sets of UI frameworks coexisting, so we have to adapt the logic of two sets of frameworks, so there’s an extra layer of judgment.

How to say, the feeling is the debt left on the selection of technology, or to pay back.

Design Review

May require a little teasing is this, there will be some shortage of front-end and back-end parts, the backend data table structure there is a problem, after all, actually did not consider can access permissions before the claim, so some interface naming convention is not unified, in the actual development process, all left to do for the front-end processing, actual workload greatly ascend, In the process of local integration, almost all the data in the database were empty, so I manually added all the data in the permission pool one by one, which took a lot of time.

At that time, I discussed with my tutor, and the backend of the interface binding permission can be done. At that time, the reply was that the backend data table structure was messy, and it would be more troublesome to enter the corresponding permission name.

So, it took about a week at home for the two men to clarify the final binding relationship and draw out the corresponding permission tree.

After about two weeks of development, after the menu page about permissions and function management is done, the back-end task is also done, in fact, some new pages to add, delete, change and check, the follow-up permissions to deal with the front-end workload is very large, so in the last two weeks, the back-end basically nothing to do.

Test pass

In the day I started writing this article, I put the test found that all the front-end defect repair, test for several days, classmates during to repair as soon as I find a problem, the final test through all of the cases, the moment will feel some discomfort before all didn’t, finally is to make the system online, Seems like the last few weeks of quiet bug-fixing have been pretty good.

After passing the test, there will be the product acceptance process, at this time, I found the problem again, because now the control of permissions is related to the interface, for example, my submit button is actually related to an action, namely the back-end API, so the interface permissions are put line by line under a menu function. Rather than the product expected to add, delete, change the review rights.

To put it simply, from the perspective of the product, some permissions seem unnecessary to separate, the query is only one line, at this time there are differences, just as in the design review stage, the back-end interface is not unified, all handled by the front end, can not release all the unnecessary permissions, right? Which interface does my button permissions bind to?

Communication process

At this time, the product looked for the front end and the back end, so I felt that the design was not reasonable. Interface is not equal to permission, and I thought that we designed from the perspective of development, rather than a product perspective.

My supervisor felt reluctant to discuss it, and I was dragged in to have a look later. At that time, WHAT I thought was that there was no result after the discussion. Since the access permission was required, it was difficult to reach an agreement by only changing the front end and leaving some interfaces of the back end unchanged.

For example, an edit box may request different interfaces because of the result of the first drop-down box, and the request path is not consistent. In fact, this can be made into one interface, which is also convenient for permission control.

At this time, the back-end colleagues also found the problem, that which is to transform some interface, but in fact should not change a lot, after all, the whole development cycle is nearly a month, hasn’t been changed before, now suddenly change, will again dragged a long progress, moreover, the back-end logic changed, the front have to follow the change, front page changed, some test cases may also want to test it again, That’s gg.

Final treatment

Fortunately, after analysis, the problem is not very big, and some interfaces still need to be combined. It does not mean that permissions and interfaces are one to one. Permissions are a large whole, and there may be multiple interfaces.

The way to handle this is to use wildcard characters if the request path prefix is the same. For other cases that are difficult to deal with, it is not for me to deal with, but for communication between my tutor and the backend students. After a look, the binding parent authority is adopted to deal with it. In fact, the backend students and the front end have made a little compromise, adding a little more work to each other.

Anyway, the front end is definitely going to change, and the back end is going to change as well.

Summary and review

When I finished writing this article, I basically solved the problem and waited for the product to be arranged online. Here is a summary of the development process:

First of all, I realized that a good system or product needs to be carefully polished. It is not to say that things can be done well immediately. For example, the online function may be tested no problem at that time, and maybe one day there will be some small bugs.

The second point is the code quality problem, I think there will be a lot of people make fun of the code written by predecessors, including myself sometimes find some problems, click on it and find the submission history is my own laugh, it is really too bad.

Contrast I just to write the code and write the code now or have certain difference, so code quality is improving, but in the past the stacked problem or will have, actually think about well, at least not met to define a function f, and then a bunch of very short variable names, is that only the parties themselves can read the code, this is one of my classmate met. In general, first of all, no matter how the code written by predecessors, at least at that time is to deliver the requirements, now encountered to change, to improve their own requirements, do not leave a hole for others.

Third point about the prototype of the product design, we know the Internet staff liquidity is quite big, especially in the years later, during this three silver four, job-hopping is quite much, so do the system prototype design products might have left before, that is the design, and the later design is different, so there will be some gaps, who is going to solve this?

Of course, we developed it, so we experienced it in the development process this time. I still remember when we first received the big demand, held a design review and evaluated the workload and time, we thought why we had to change so much, it would be better to start from scratch.

Now in retrospect, it is also good, subdividing the work and the solution of the piece well, finally found that can also, in the process, I am not the core staff, the core of course is my teacher, is thanks to the design of the mentor, there are some difficulties to think of a good way to solve, I also learnt many involved in the process. Perhaps it is also a point for job-hopping to find a job.

So, that’s all, and I’ll add whatever comes to mind.

Non-technical articles, as a personal record, not praise, content for reference only.

I also shot a video version in B station, with the same name of this account, you can watch.

Learning is like rowing upstream; not to advance is to drop back