// main.js import Vue from "vue"; import router from "./router"; import VueRouterUserRoles from "vue-router-user-roles"; Vue.use(VueRouterUserRoles, { router }); Protecting routes. For example, the requirement of many companies is that the permissions of each page are dynamically configured, unlike the default settings in this project. It uses the method of redirecting to the Redirect page and then redirecting back to the original page.

We will be blocking off parts of our admin section, using the requireAuth() method, that we created here: Vue Router Navigation Guards with Vuex – Server Side Up. If you have a nested Route, such as @/views/nested , Goodbye, Prettify. For this tutorial, we will extend the application to add a page with blog posts that can only be edited by the creator. Let’s revisit that. Tags View By changing the url query to trigger the view changes。We listen to each link's click event on the sidebar, each click will push a different query for the router to ensure that the view is refreshed. Support multiple permissions stacking. Note: As many as the level of routes nested. Also introduced in the front, the sidebar is generated dynamically by reading the route and combined with the permission judge, but also need to support the infinite nesting of routes, so here is also used to the recursive components. To learn more, see our tips on writing great answers. This project also packages a breadcrumb navigation, which is also dynamically generated by the watch $route change. This also modify many default sidebar styles of element-ui. It is the same with the menu, you can also config it in the routing.

In Vue Authentication And Route Handling Using Vue Router, we had created an application with different user types. npm install. The reason we use this.$router is because we don't want to import the router in every single component that needs to manipulate routing. Don't forget to manually add an < router-view > to the root file of the secondary directory. When the user logs in to get roles, the front end requests the accessible routing table to the backend according to roles, so that the accessible pages are dynamically generated.

The "component" can, // either be an actual component constructor created via. Before using the development model of spa(single page application), each time the user clicks the sidebar will request this page again, the user gradually developed the habit of clicking the current route in the sidebar to refresh the view. Play the long game when learning to code. The implementation of this project's permission is: compare the routing table by obtaining the current user's permission, and generate the routing table accessible by the current user with the permission, and dynamically mount it to router through router.addRoutes. There is one thing to be careful about is that the 404 page must be the last to load, if it is declared in constantRoutes. Up until this point, we have been working on building an administration section for https://roastandbrew.coffee. So the current version uses el-scrollbar to handle the sidebar scrolling problem. -->,

| | | 0 Comments