17-----vue前端权限管理

原理：

1.后台同学返回一个json格式的路由表，再这个实例中，我们使用的是文件动态路由的形式;

2.动态路由，每个路由根据自己的权限字段，设定好权限字段。

3.利用vue-router的beforeEach、addRoutes、localStorage来配合上边两步实现效果;

4.左侧菜单栏根据拿到转换好的路由列表进行展示;

大体步骤：拦截路由->后台取到路由->保存路由到localStorage(用户登录进来只会从后台取一次，其余都从本地取,所以用户，只有退出在登录路由才会更新)

1、首先定义我们的路由文件：

import Login from './views/Login.vue'
import NotFound from './views/404.vue'
import Home from './views/Home.vue'
import Main from './views/Main.vue'
import Table from './views/nav1/Table.vue'
import Form from './views/nav1/Form.vue'
import user from './views/nav1/user.vue'
import Page4 from './views/nav2/Page4.vue'
import Page5 from './views/nav2/Page5.vue'
import Page6 from './views/nav3/Page6.vue'
import echarts from './views/charts/echarts.vue'
import UserManager from './views/users/UserManager'
import Permission from './views/users/Permission'
import Role from './views/users/Role'

let routes = [
    {
        path: '/login',
        component: Login,
        name: '',
        hidden: true
    },
    {
        path: '/404',
        component: NotFound,
        name: '',
        hidden: true
    },
    //{ path: '/main', component: Main },
];
export default routes;

export const powerRouter = [
    {
        path: '/',
        component: Home,
        name: '系统管理',
        iconCls: 'fa el-icon-message',//图标样式class
        role:['role'],
        children: [
            { path: '/main', component: Main, name: '主页', hidden: true }, // 子菜单列表
            // { path: '/table', component: Table, name: 'Table' },
            //{ path: '/form', component: Form, name: 'Form' },
            // { path: '/permission', component: Permission, name: '权限管理' },
            { path: '/role', component: Role, name: '角色管理' },
            { path: '/user', component: UserManager, name: '用户管理' },
        ]
    },
    {
        path: '/',
        component: Home,
        name: '导航二',
        iconCls: 'fa fa-id-card-o',
        role:['role'],
        children: [
            { path: '/page4', component: Page4, name: '页面4' },
            { path: '/page5', component: Page5, name: '页面5' }
        ]
    },
    {
        path: '/',
        component: Home,
        name: '',
        iconCls: 'fa fa-address-card',
        leaf: true,//只有一个节点
        // role:['cmdb','role','user'],
        children: [
            { path: '/page6', component: Page6, name: '导航三' }
        ]
    },
    {
        path: '/',
        component: Home,
        name: 'Charts',
        iconCls: 'fa fa-bar-chart',
        // role:['cmdb','role','user'],
        children: [
            { path: '/echarts', component: echarts, name: 'echarts' }
        ]
    },
    {
        path: '*',
        hidden: true,
        // role:['role','user'],
        redirect: { path: '/404' }
    }
];

router.js