路由權限配置

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/pages/login'
import { generateRoutes } from './permission'
Vue.use(Router)

export const routes = [
    {
        path: '/login',
        name: 'login',
        hidden: true,
        component: Login
    },
    {
        path: '/',
        redirect: '/Choose'
    },
    {
        path: '/Choose',
        name: 'choose',
        component: () => import('../pages/choose')
    },
    {
        path: '/Use',
        name: 'Use',
        component: () => import('../pages/use')
    },
    {
        path: '/Sdk',
        name: 'sdk',
        component: () => import('../pages/sdk/sdk')
    },
    {
        path: '/404',
        name: '404頁面',
        component: () => import('../pages/404.vue')
    }
]

// 需根據權限進行動態生成的路由
export const asyncRoutes = [
    { path: '/test1', meta: { roles: ['admin'] }, name: 'test1', component: () => import('../pages/test1') },
    { path: '/test2', meta: { roles: ['edit'] }, name: 'test2', component: () => import('../pages/test2') },
    { path: '/test3', meta: { roles: ['admin', 'edit'] }, name: 'test3', component: () => import('../pages/test3') },
    { path: '*', redirect: '/404', hidden: true }
]

const router = new Router({
    routes: routes
})

var flag = true // 頁面刷新標志

router.beforeEach((to, from, next) => {
    if (to.path === '/login') {
        sessionStorage.removeItem('name')
        // sessionStorage.removeItem('pass')
        flag = true
        next()
    }
    let admin = sessionStorage.getItem('name')
    if (!admin && to.path !== '/login') {
        console.log('不是登錄頁面')
        next({ path: '/login' })
    } else {
        // 該處進行動態路由生成（當頁面刷新時或首次進入該系統時，生成路由）
        if (flag && to.path !== '/login') {
            flag = false
            router['options'].routes = routes
            let generateAsyncRoutes = generateRoutes(asyncRoutes, sessionStorage.getItem('name')) // 根據登錄角色生成動態路由
            router.addRoutes(generateAsyncRoutes)
            router['options'].routes = router['options'].routes.concat(generateAsyncRoutes)
            next({ ...to, replace: true }) // hack方法 確保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
        } else {
            next()
        }
    }
})

export default router

router/permission.js

function hasPermission(route, role) {
    if (route.meta && route.meta.roles) {
        return route.meta.roles.indexOf(role) !== -1
    } else {
        return true
    }
}

// 該處的role為登錄角色，可根據實際需要進行動態生成
export const generateRoutes = function(asyncRoutes, role) {
    const res = []
    asyncRoutes.forEach(item => {
        const mid = { ...item }
        if (hasPermission(mid, role)) {
            if (mid.children) {
                mid.children = generateRoutes(mid.children, role) // 對子路由進行遞歸，防止遺漏（同時該部分支持多級子路由的遞歸生成）
            }
            res.push(mid)
        }
    })
    return res
}

login.vue

<template>
    <div>
        <div>登陸頁面</div>
        <div @click="login">登陸</div>
    </div>
</template>
<script>
export default {
    methods: {
        login() {
            sessionStorage.setItem('name', 'admin')
            this.$router.push('/choose')
        }
    }
}
</script>