Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to achieve access control in the Angular project". In the daily operation, I believe that many people have doubts about how to achieve access control in the Angular project. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how to achieve access control in the Angular project". Next, please follow the editor to study!

Menu routing control

When the system is developed, there will be a lot of menus. At this time, it is necessary for the back end to judge the user's role and return different menu routes according to the user's authority.

The format of the returned data requires us to correspond to the routing path we wrote in app-routing.module.ts.

For example, we have a routing file as follows:

/ / app-routing.module.tsconst routes: Routes = [{path: 'user-manage', component: AuthLayoutComponent, / / authenticated component children: [{path:'', redirectTo: 'user', pathMatch:' full'}, {path: 'user', / / user list component: UserComponent} {path: 'user/detail/:uuid', / / user details Something like this will not appear in the menu component: UserDetailComponent}, {path: 'department', / / Department list component: DepartmentComponent}]}, / /.]

On the page, our menu shows the data like this:

{{child.title}}

A secondary menu is defined with the following fields:

Title field-the title of the menu

Url field-the route of the menu, corresponding to the complete path in the app-routing.module.ts

Icon field-small icon in front of the title, no secondary title

Is_open field-Identification of whether the menu is expanded

At this point, the menu interface at the back end should return data similar to the following:

/ demo.component.tspublic menu_data:any = [{title: "member Management", url: "user-manage", icon: "user-switch", / / here is the angular ant design icon is_open: false, children: [{title: "user", url: "user-manage/user", icon: undefined, is_open: false} {title: "Department", url: "user-manage/department", icon: undefined, is_open: false}]}, / /.]

Maybe you have questions? ️: icon and is_open are not used in the second-level title, so why write them?

Well, readers can ask for back-end returns, but in order to keep the data readable and easy to operate, it's better to keep it.

User behavior control

User behavior control, this is a very fine-grained behavior. It is small enough to control the display of a button for the user, but in essence, it is a restriction on the request of the back-end interface. For example, if you request a list, but you don't have permission, then you can't request it and report an error of 401.

We can limit the user's inability to view or other actions according to the needs and different roles of the user. However, this is very unreasonable, and users can initiate requests through tools such as postman, rather than through the system. So, we have to--

Make a restriction on the back end

We get the permissions of the interface returned by the backend, such as receiving the following data:

{code: 0, msg: 'ok', results: {getUserList: {url:' / api/get/user/list', / / of course, it can be returned as specified by the front and back end, not necessarily the real url. Enable: true}, editUser: {url:'/ api/edit/:uuid', enable: false}

After we get the data, we compare it with the content saved at the front end, and then control it according to the conditions. The interface needs to make corresponding restrictions on access, rather than just front-end judgment.

Edit

Simple front-end judgment: 1. Difficult to maintain 2. Not secure, users can cross browser requests

At this point, the study on "how to achieve access control in the Angular project" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.