Shulou(Shulou.com)06/03 Report--

This article introduces you how to get started with vue vuex vue-rouert background permission routing, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Project address: vue-simple-template

There are three roles: adan barbara carrie passwords are all: 123456

Adan has the highest access A he can see the red, yellow and blue pages (a total of three pages)

Barbara has permission B. he can see red and yellow pages.

Carrie has permission C. he can see red and blue pages.

Technology stack

Webpack-package artifact vue--JavaScript framework vuex-achieve state sharing between different components vue-router-page routing babel-polyfill-convert ES6 code to ES5 code normalize.css-reset the reset style element-ui-UI component library

Project initialization

# cd to project folder cd weven-simple-template# installation dependencies (see package.json file for other dependencies installed in this project) npm install# runs project npm run dev

Project structure

After the vue-cil scaffolding initialized the project, I only modified the src folder

Src ├── App.vue-page entry ├── api-api request │ └── login.js-simulate json object data ├── assets-static resources such as topic fonts │ └── logo.png ├── components-component │ ├── index.vue │ └── login.vue ├── main.js-initialization group Component loads routing ├── router-routing │ └── index.js └── store-vuex state management ├── getters.js ├── index.js └── modules └── login.js

Key points:

The key to dynamic routing lies in the coexistence of the meta field configured by router and the status of vuex (if you don't understand, you can check the official document first)

Router/index.js

/ / initialize routing export default new Router ({routes: [{path:'/ login', name: 'Login', component: Login}]}) / / dynamic routing meta defines roleexport const powerRouter = [{path:'/', redirect:'/red', name: 'index',component: Index,hidden:false, children: [{path:' / red', name: 'red', component: red,}, {path:' / yellow', name: 'yellow', component: yellow, meta: {role:' B'}}, {path:'/ blue', name: 'blue', component: blue Meta: {role:'C'}}]]

Store/modules/lo

Logins ({commit}, info) {return new Promise ((resolve, reject) = > {let data= {}; loginByUserInfo.map (function (item) {/ / get all user information if (info.username = item.username | | info.pew = item.pew) {commit ('SET_USERNAME',item.username); / / store username and role sessionStorage.setItem (' USERNAME',item.username); / / store session commit ('SET_ROLE',item.role) SessionStorage.setItem ('ROLE', item.role); return data= {username:item.username,introduce:item.introduce};} else {return data;}); resolve (data);}) .catch (error = > {reject (error);});}, Roles ({commit}, newrouter) {return new Promise ((resolve, reject) = > {commit (' SET_NEWROUER',newrouter); / / store the latest route resolve (newrouter) ) .catch (error = > {reject (error);});}

Gin.js actions part

Logins ({commit}, info) {return new Promise ((resolve, reject) = > {let data= {}; loginByUserInfo.map (function (item) {/ / get all user information if (info.username = item.username | | info.pew = item.pew) {commit ('SET_USERNAME',item.username); / / store username and role sessionStorage.setItem (' USERNAME',item.username); / / store session commit ('SET_ROLE',item.role) SessionStorage.setItem ('ROLE', item.role); return data= {username:item.username,introduce:item.introduce};} else {return data;}); resolve (data);}) .catch (error = > {reject (error);});}, Roles ({commit}, newrouter) {return new Promise ((resolve, reject) = > {commit (' SET_NEWROUER',newrouter); / / store the latest route resolve (newrouter) ) .catch (error = > {reject (error);});}

Main.js

Router.beforeEach ((to, from Next) = > {if (store.getters.role) {/ / determine whether if (store.getters.newrouter.length! = = 0) {next () / / resolve hook} else {let newrouter if (store.getters.role = ='A') {/ / determine authority newrouter = powerRouter} else {let newchildren = powerRouter [0] .children.filter (route = > {if (route.meta) {if (route.meta.role = = store.getters) .role) {return true} return false} else {return true}}) Newrouter = powerRouter newrouter [0] .children = newchildren} router.addRoutes (newrouter) / / add dynamic routing store.dispatch ('Roles',newrouter) .then (res = > {next ({... to})}) .catch (() = > {})} else {if ([' / login'] .indexOf (to.path)! = =-1) {next ()} else {next ('/ login')})

Components/index.vue

/ / the mapGetters helper function only maps the getter in store to local computing attributes. MapGetters (['newrouter']) on how to get started with the permission routing of the vue vuex vue-rouert background is shared here. I hope the above can be helpful to you and learn more. If you think the article is good, you can share it for more people to see.

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.