Vue-router实现鉴权控制

Vue-router实现鉴权控制

案例背景

鉴于Vue前端框架的易用性及优秀的性能，被越来越多的业务组件前端开发所采用。那么针对不同的用户，自然产生了对前端路由进行权限控制这一需求。本文将对Vue环境下，针对前端路由权限控制的实现进行说明。

技术背景

首先解释一下什么是前端路由，简单来说，前端路由就是客户端随着浏览器地址栏不同的URL地址来展示给用户不同的内容或页面，无需依赖服务器。而router是一种机制，相当于一个管理者，由它来管理路由。
在Vue项目中实现路由管理也是比较便捷的，因为我们页面中的所有内容都是组件化的，那么我们只要将vue-router(路由管理器)引入，然后把路径和组件对应起来，再在页面中把组件渲染出来就可以了。

实现

const page1 = {
    path: '/page1Url',
    name: 'page1',
    meta: {
        title: 'page1'
    },
    component: () => import ('./page1'),
    beforeEnter: (to, from, next) => {
        next()
    }
}
const page2 = {
    path: '/page2Url',
    name: 'page2',
    meta: {
        title: 'page2'
    },
    component: () => import ('./page2'),
    beforeEnter: (to, from, next) => {
        next()
    }
}
// 实例化router 在main.js Vue实例中引入
const router = new Router({
  routes: []
})

let list = [] // 动态路由表
let auth = null // 已设置完成的路由权限

// 将所有路由及组件按权限进行分类
const tableLists = {
    auth1: [
        Page1
    ],
    auth2: [
        Page2
    ]
}

function handleAuth (authData) {
    ['auth1', 'auth2'].forEach(model => {
        if (authData[model]) {
        tableLists[model].forEach(item => {
            list.push(item)
        })
        } else {
        tableLists[model].forEach(item => {
            item.component = Page401 // 不具备权限的信息直接转到401Error页面
            list.push(item)
        })
        }
    })
    auth = authData // 保存当前路由下权限信息
    router.addRoutes(list) // 将配置好的路由列表加入
}
router.beforeEach((to, from, next) => {
    if (auth) {
        next() // addRoutes后会再次进入beforeEach函数 所以直接执行next()即可
    } else {
        // 开发模式下
        if (process.env.NODE_ENV === 'development') {
            handleAuth({
                auth1: true,
                auth2: true
            })
            router.push({ path: to.fullPath })
            next()
        } else {
            // 获取后台路由权限数据
            axios.get(`${requestAuthUrl}`).then(res => {
                handleAuth(res)
                router.push({ path: to.fullPath }) // 刷新路由 to:即将进入的目标
                next() // 必须调用next() 不然resolve会一直等待
            })
        }
    }
})

export default router