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

This article mainly introduces the relevant knowledge of "how to achieve access control in vue-router". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to achieve access control in vue-router" can help you solve the problem.

It is a common requirement to control front-end permissions in vue-router:

One way is to complete the judgment directly at the back end, provide a list of pages and operations, and render at the front end, but this scheme is not elegant and the front and back ends are highly coupled.

The more common practice is to separate the login page from router, write a permission control file, load router according to user permissions after login, and then transfer permissions as parameters to various components to control the rendering of elements. This method is reasonable and has no extra overhead, but it is more troublesome to write a login page and permission control file independently, especially for some small projects.

We wish there was an easier way. To sort out the requirements at this time, our main goals are:

Menu bar control, according to permissions to render the page menu that can be accessed

Operation button permission control, do not display those without operation permission

If someone directly clicks the link or enters an address to enter a page that does not have permission, block it

The first and second goals are easy to achieve. Pass the permission list to the corresponding components and judge through v-if. What needs to be solved is the interception of ultra vires pages. In the above common practice, in order to achieve interception, a separate login page is written, and then routes are loaded according to permissions after login, so that routes without permissions are not loaded at all, so they are directed to the 404 page.

So, the question now is, how can there be an easier way?

Obviously, if we don't want to write the login page alone, router finishes loading before logging in. If we can't automatically direct the ultra vires page to the 404 page through router, what we can do is to boot it manually. If you have a clear idea, there will be no pressure to achieve it:

According to the life cycle of the vue component, we can determine the permissions on the mounted hook. If the user permission list passed through props does not have the corresponding permissions, we will jump to 404:

Mounted () {if (! this.check_user_privilege (current_page)) {this.$Message.error ('insufficient permissions'); this.$router.push ('404');}}

Of course, in fact, vue-router also provides hook methods for page jumps, such as beforeEach, afterEach and so on. If we want to use them directly in the component, we can use the beforeRouteEnter method to judge when entering the page, such as:

BeforeRouteEnter (to, from, next) {next (vm = > {if (! vm.check_user_privilege (current_page)) {vm.$Message.error ('insufficient permissions'); vm.$router.push ('404');}})}

For more information, please see [documentation].

Of course, for this example, using the hook provided by vue-router is not as good as writing the judgment condition directly in mounted, because the next in the beforeRouteEnter method needs to call component parameters, which is executed after mounted execution, and we often need to load page data in the mounted hook, in order to avoid waste, it is better to judge first.

Compared with the common methods, the simple method has additional overhead, mainly because the route needs to be fully loaded and a judgment is made after the page is loaded. However, from the point of view of writing code, it seems to be more economical logically, because there is no need to write another file for centralized permission control. As for the permission judgment of each page, that is what should be done in the menu bar. Extending to different pages is not a burden.

Will there be any side effects? For the time being, there seems to be no. If page permissions are judged at the beginning of mounted, there will be no problem of loading ultra vires data, and data permissions need to be judged separately by the backend, so the frontend should not be worried about it.

This is the end of the introduction on "how to achieve access control in vue-router". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.