vue路由和php路由区别,vue动态添加路由（路由权限）

后台管理系统，不同等级的用户会有不同的权限，看到的页面也会不同，这个时候就会用到动态添加路由，主要用到如下语句。

router.options.routes = routes;//router.options.routes 不是响应式的

router.addRoutes(routes)

复制代码下面是做权限系统时，个人做法，如有不妥，忘指教。

router/index.js

import Vue from 'vue'

import Router from 'vue-router'

import newLogin from '@/components/Login/login'// 登录

import Index from '@/components/Index/index'// 主页

const Home = () => import('@/components/Home/index.vue')//home

// 解决同个路由重复点击报错

const originalPush = Router.prototype.push;

Router.prototype.push = function push(location) {

return originalPush.call(this,location)

}

Vue.use(Router)

//不需要登录即可看到的路由页面

const constantRoutes = [

{

path: '/login',

name: 'login',

component: newLogin,

meta:{

isLogin:false,

title:'***'

}

},

{

path: '/',

component: Index,

redirect: '/home',

children: [

{

path: '/home',

name:'home',

component: Home,

meta:{

isLogin:false,

keepAlive: true,

title:'***'

}

},

]

}

]

//创建路由

const createRouter = () => new Router({

routes: constantRoutes

})

const router = createRouter()

//写一个重置路由的方法，切换用户后，或者退出时清除动态加载的路由

export function resetRouter() {

const newRouter = createRouter()

router.matcher = newRouter.matcher // 新路由实例matcer，赋值给旧路由实例的matcher，(相当于replaceRouter)

}

export default router

复制代码

在登录后获取后端返回的用户可用权限，当然这里需要和后端人员商定一个前后端一致的权限表。拿到后端返回的此用户的权限，根据权限表去对比，从而动态添加此用户权限路由。

我是在store.js文件里获取的用户权限，直接赋上代码。

与后端商定的权限表，每个路由的permission保证前后端一致

sideList.js 是侧边栏亦是路由表，isPermission为true展示到侧边栏，isPermission在store.js设定

allrouter.js是全部事先定义好的的路由页面

store.js

import Vuex from 'vuex';

import Vue from 'vue'

import sideList from '@/router/sideList.js'

import router from '@/router/index.js'

import allRouter from '@/router/allRouter'

import axios from 'axios'

import { api } from '@/assets/config/interface_api.js'

import { Message } from 'element-ui';

import { setCookie, getCookie, delCookie, delAllCookie } from '@/assets/js/cookie.js'

Vue.use(Vuex);

const state = { //要设置的全局访问的state对象

sideList:sideList

};

const getters = {

getSideList(state) {

return state.sideList

}

}

const mutations = {

}

const actions = {

permissionInit({ commit, state }, obj) {

return new Promise(function (resolve, reject) {

//获取用户被禁用权限

axios.get(api.BASEURL + api.getPermissions)

.then(function (res) {

let data = res.data;

if(data && data.errno == 0){

var permissionPHP = data.rst.permissions;

var sideArr = [].concat(sideList);

var addRoutes = [];

sideArr.forEach((item,index) =>{

if(permissionPHP.indexOf(item.permission) != -1){

//权限存在

item.isPermission = true;

item.groupList.forEach((smallItem)=>{

if(permissionPHP.indexOf(smallItem.permission) != -1){

//权限存在，isPermission为true展示到侧边栏

smallItem.isPermission = true;

//拼接要动态添加的路由

addRoutes.push({

path:smallItem.path,

name:smallItem.component,

component:allRouter[smallItem.component],

meta:{

title:smallItem.name

}})

}

})

}

})

if(addRoutes.length == 0){

Message({

type: 'warning',

message: '对不起，您暂无权限查看本系统！'

});

return;

}

//state.sideList为最终确定用户权限所展示的侧边栏

state.sideList = sideArr;

//拼接(routes)要添加的路由

var routes = [

{

path: "*",

component: allRouter.errorPage,

},{

path: '/',

component: allRouter.Index,

redirect:addRoutes[0].path,

children: addRoutes

}]

router.options.routes = routes;//router.options.routes 不是响应式的

router.addRoutes(routes)

resolve(true);

}else{

// Message({

// type: 'warning',

// message: data.err

// });

}

}).catch(()=>{

Message({

type: 'warning',

message: '系统错误，请稍后重试！'

});

})

});

}

}

const store = new Vuex.Store({

state,

getters,

mutations,

actions

});

export default store;

复制代码

main.js

// 权限控制------

store.dispatch('permissionInit').then((res)=>{

console.log(res,'成功')

})

// 登录拦截

router.beforeEach((to, from, next) => {

if (to.meta.title) {

document.title = to.meta.title

}

if(to.path == '/login'){

if(getCookie('role_id') && Boolean(getCookie('isLogin'))){

//登录未过期

next('/')

}else{

next();

}

}else{

if(!getCookie('role_id') || !Boolean(getCookie('isLogin'))){

// 登录过期

next('/login')

}else{

next();

}

}

});

复制代码

登录页面login.vue

this.$axios({

url: this.URL.BASEURL + this.URL.LOGIN,

method: 'post',

data:{

phone:this.phone,

type:1,

code:this.code,

}

}).then((res) => {

this.loading.close();

var res=res.data;

if(res&& res.errno == 0){//登录成后

var data=res.rst;

this.$cookieStore.setCookie('admin_id',data.id)

this.$cookieStore.setCookie('isLogin',true)

this.$store.dispatch('permissionInit').then((res)=>{

let routeData = '';

this.$router.push('/');

})

}else{

}

复制代码

退出登录，或者切换用户后，清除动态添加的路由，调用router/index.js里预留的方法resetRouter