关于前端:vue动态路由权限管理

动静路由设置个别有两种：
(1)、简略的角色路由设置：比方只波及到管理员和普通用户的权限。通常间接在前端进行简略的角色权限设置
(2)、简单的路由权限设置：比方 OA 零碎、多种角色的权限配置。通常须要后端返回路由列表，前端渲染应用
1、简略的角色路由设置
（1）配置我的项目路由权限
// router.js

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout'
Vue.use(Router)
let asyncRoutes = [
    {
        path: '/permission',
        component: Layout,
        redirect: '/permission/page',
        alwaysShow: true, 
        name: 'Permission',
        meta: {
            title: 'Permission',
            roles: ['admin', 'editor'] // 一般的用户角色
        },
        children: [
            {
                path: 'page',
                component: () => import('@/views/permission/page'),
                name: 'PagePermission',
                meta: {
                    title: 'Page',
                    roles: ['editor']  //  editor 角色的用户能力拜访该页面
                }
            },
            {
                path: 'role',
                component: () => import('@/views/permission/role'),
                name: 'RolePermission',
                meta: {
                    title: 'Role',
                    roles: ['admin']    //  admin 角色的用户能力拜访该页面
                }
            }
        ]
    },
 
]
let router = new Router({
    mode: 'history',
    scrollBehavior: () => ({ y: 0}),
    routes: asyncRoutes
})
export default router

（2）新建一个公共的 asyncRouter.js 文件
// asyncRouter.js

// 判断以后角色是否有拜访权限
function hasPermission(roles, route) {if (route.meta && route.meta.roles) {return roles.some(role => route.meta.roles.includes(role))
  } else {return true}
}
// 递归过滤异步路由表，筛选角色权限路由
export function filterAsyncRoutes(routes, roles) {const res = [];
  routes.forEach(route => {const tmp = { ...route}
    if (hasPermission(roles, tmp)) {if (tmp.children) {tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      res.push(tmp)
    }
  })
 
  return res
}

（3）创立路由守卫：创立公共的 permission.js 文件，设置路由守卫

import router from './router'
import store from './store'
import NProgress from 'nprogress' // 进度条插件
import 'nprogress/nprogress.css' // 进度条款式
import {getToken} from '@/utils/auth' 
import {filterAsyncRoutes} from '@/utils/asyncRouter.js'
 
NProgress.configure({showSpinner: false}) // 进度条配置
 
const whiteList = ['/login'] 
 
router.beforeEach(async (to, from, next) => {
    // 进度条开始
    NProgress.start()
     // 获取路由 meta 中的 title，并设置给页面题目
    document.title = to.meta.title
    // 获取用户登录的 token
    const hasToken = getToken()
    // 判断以后用户是否登录
    if (hasToken) {if (to.path === '/login') {next({ path: '/'})
            NProgress.done()} else {
            // 从 store 中获取用户角色
            const hasRoles = store.getters.roles && store.getters.roles.length > 0  
            if (hasRoles) {next()
            } else {
                try {
                    // 获取用户角色
                    const roles = await store.state.roles
                    // 通过用户角色，获取到角色路由表
                    const accessRoutes = filterAsyncRoutes(await store.state.routers,roles)
                    // 动静增加路由到 router 内
                    router.addRoutes(accessRoutes)
                    next({...to, replace: true})
                } catch (error) {
                    // 革除用户登录信息后，回跳到登录页去
                    next(`/login?redirect=${to.path}`)
                    NProgress.done()}
            }
        }
    } else {
        // 用户未登录
        if (whiteList.indexOf(to.path) !== -1) {
            // 须要跳转的路由是否是 whiteList 中的路由，若是，则间接条状
            next()} else {
            // 须要跳转的路由不是 whiteList 中的路由，间接跳转到登录页
            next(`/login?redirect=${to.path}`)
            // 完结精度条
            NProgress.done()}
    }
})
 
router.afterEach(() => {
    // 完结精度条
    NProgress.done()})

（4）在 main.js 中引入 permission.js 文件

（5）在 login 登录的时候将 roles 存储到 store 中
2、简单的路由权限设置（后端动静返回路由数据）
（1）配置我的项目路由文件，该文件中没有路由，或者存在一部分公共路由，即没有权限的路由

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout';
Vue.use(Router)
// 配置我的项目中没有波及权限的公共路由
export const constantRoutes = [
    {
        path: '/login',
        component: () => import('@/views/login'),
        hidden: true
    },
    {
        path: '/404',
        component: () => import('@/views/404'),
        hidden: true
    },
]
 
const createRouter = () => new Router({
    mode: 'history',
    scrollBehavior: () => ({ y: 0}),
    routes: constantRoutes
})
const router = createRouter()
 
export function resetRouter() {const newRouter = createRouter()
    router.matcher = newRouter.matcher
}
 
export default router

（2）新建一个公共的 asyncRouter.js 文件

// 引入路由文件这种的公共路由
import {constantRoutes} from '../router';
// Layout 组件是我的项目中的主页面，切换路由时，仅切换 Layout 中的组件
import Layout from '@/layout';
export function getAsyncRoutes(routes) {const res = []
    // 定义路由中须要的自定名
    const keys = ['path', 'name', 'children', 'redirect', 'meta', 'hidden']
    // 遍历路由数组去重组可用的路由
    routes.forEach(item => {const newItem = {};
        if (item.component) {
            // 判断 item.component 是否等于 'Layout', 若是则间接替换成引入的 Layout 组件
            if (item.component === 'Layout') {newItem.component = Layout} else {
            //  item.component 不等于 'Layout', 则阐明它是组件门路地址，因而间接替换成路由引入的办法
                newItem.component = resolve => require([`@/views/${item.component}`],resolve)
                
                // 此处用 reqiure 比拟好，import 引入变量会有各种莫名的谬误
                // newItem.component = (() => import(`@/views/${item.component}`));
            }
        }
        for (const key in item) {if (keys.includes(key)) {newItem[key] = item[key]
            }
        }
        // 若遍历的以后路由存在子路由，须要对子路由进行递归遍历
        if (newItem.children && newItem.children.length) {newItem.children = getAsyncRoutes(item.children)
        }
        res.push(newItem)
    })
    // 返回解决好且可用的路由数组
    return res
}

（3）创立路由守卫：创立公共的 permission.js 文件，设置路由守卫

//  进度条引入设置如下面第一种形容一样
import router from './router'
import store from './store'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import {getToken} from '@/utils/auth' // get token from cookie
import {getAsyncRoutes} from '@/utils/asyncRouter'
 
const whiteList = ['/login'];
router.beforeEach(async (to, from, next) => {NProgress.start()
    document.title = to.meta.title;
    // 获取用户 token，用来判断以后用户是否登录
    const hasToken = getToken()
    if (hasToken) {if (to.path === '/login') {next({ path: '/'})
            NProgress.done()} else {
            // 异步获取 store 中的路由
            let route = await store.state.addRoutes;
            const hasRouters = route && route.length>0;
            // 判断 store 中是否有路由，若有，进行下一步
            if (hasRouters) {next()
            } else {
                //store 中没有路由，则须要获取获取异步路由，并进行格式化解决
                try {const accessRoutes = getAsyncRoutes(await store.state.addRoutes);
                    // 动静增加格式化过的路由
                    router.addRoutes(accessRoutes);
                    next({...to, replace: true})
                } catch (error) {// Message.error('出错了')
                    next(`/login?redirect=${to.path}`)
                    NProgress.done()}
            }
        }
    } else {if (whiteList.indexOf(to.path) !== -1) {next()
        } else {next(`/login?redirect=${to.path}`)
            NProgress.done()}
    }
})
 
router.afterEach(() => {NProgress.done()
})

（4）在 main.js 中引入 permission.js 文件

（5）在 login 登录的时候将路由信息存储到 store 中

//  登录接口调用后，调用路由接口，后端返回相应用户的路由 res.router，咱们须要存储到 store 中，不便其余中央拿取
this.$store.dispatch("addRoutes", res.router);

到这里，整个动静路由就能够走通了，然而页面跳转、路由守卫解决是异步的，会存在动静路由增加后跳转的是空白页面，这是因为路由在执行 next()时，router 外面的数据还不存在，此时，你能够通过 window.location.reload()来刷新路由
后端返回的路由格局：

routerList = [
  {
        "path": "/other",
        "component": "Layout",
        "redirect": "noRedirect",
        "name": "otherPage",
        "meta": {"title": "测试",},
        "children": [
            {
                "path": "a",
                "component": "file/a",
                "name": "a",
                "meta": {"title": "a 页面", "noCache": "true"}
            },
            {
                "path": "b",
                "component": "file/b",
                "name": "b",
                "meta": {"title": "b 页面", "noCache": "true"}
            },
        ]
    }
]

留神：vue 是单页面应用程序，所以页面一刷新数据局部数据也会跟着失落，所以咱们须要将 store 中的数据存储到本地，能力保障路由不失落。对于 vue 页面刷新保留页面状态，
1、通过本地存储 state 中的数据，页面刷新胜利后再次从本地存储中读取 state 数据

//  vuex 中的数据产生扭转时触发 localStorage 的存储操作
localstorage.setItem('state', JSON.stringify(this.$store.state))
 
//  页面加载的时候在 created 中获取本地存储中的数据
localStorage.getItem('state') && this.$store.replaceState(JSON.parse(localStorage.getItem('state')));

留神：该操作会频繁的触发 localStorage 的存取工作
2、监听页面刷新，触发存取操作
首先在入口组件 App.vue 中的 created 中利用 localstorage 或者 sessionStorage 来存取 state 中的数据

//   在页面加载时读取 sessionStorage 里的状态信息
 
if (sessionStorage.getItem('state') ) {this.$store.replaceState( Object.assign( {}, this.$store.state,
  JSON.parse(sessionStorage.getItem('state') ) ) )
}
 
//   页面刷新时将 state 数据存储到 sessionStorage 中
 
window.addEventListener('beforeunload',()=>{sessionStorage.setItem('state',JSON.stringify(this.$store.state) )
})

留神：Object.assign() 办法用于将所有可枚举属性的值从一个或多个源对象复制到指标对象
到这里，咱们在 PC 端、安卓端、mac 端 safair 浏览器中均能失常拜访，然而在 ios 端的 safair 浏览器中存在问题，页面刷新后拿不到数据。
起因：在 ios 端 beforeunload 办法未执行，造成 state 数据未存储到本地，通过查问 ios 官网文档，文档中说 unload 和 beforeunload 曾经废除，应用 pagehide 作为代替

window.addEventListener('pagehide', () => {sessionStorage.setItem('state', JSON.stringify(this.$store.state))
   })

这样一番改变后，果然在 PC 端、安卓端、ios 端均未呈现问题
// 会话历史事件

pageshow 事件：在用户拜访页面时触发；pageshow 事件相似于 onload 事件，onload 事件在页面第一次加载时触发，pageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。pagehide 事件：在用户来到以后网页时触发；pagehide 事件有时能够代替 unload 事件，但 unload 事件触发后无奈缓存页面。