vue-django/src/router/permission.js

个人实验项目, 本框架的目标是借鉴并超越django admin的自动化思想, 实现UI前端的极简快速定制开发

import Vue from 'vue'
import router from './index'
import store from '../store'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css'// progress bar style
import {getToken, setToken} from '../utils/auth' // getToken from cookie

NProgress.configure({showSpinner: false})// NProgress Configuration
const loginUrl = '/auth/login'

router.beforeEach((to, from, next) => {
        NProgress.start() // start progress bar
        let loginRequired = (to.path === loginUrl) ? false : (to.matched.some(record => record.meta.loginRequired !== false))
        if (!loginRequired) {
            next()
        } else {
            let token = getToken()
            if (token && !store.state.token) {
                store.state.token = token
                setToken(token)
            }
            let user = store.state.user
            let logined = user && user.id
            if (!logined) {
                store.dispatch('getUserInfo').then(({data}) => {
                    user = store.state.user
                    const roles = user.groups
                    // router.addRoutes(asyncRouterMap) //todo: make dynamics routers
                    next({...to, replace: true}) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
                }).catch((error) => {
                    Vue.$message({message:'身份认证失败, 请重新登录', type:'error'})
                    next({path: loginUrl, query: {redirect: to.fullPath}})
                })
            } else {
                // 权限判断
                const allowRoles = to.meta.roles
                let isAllowed = true

                if (isAllowed) {
                    next()
                } else {
                    next({path: '/notallow'})
                }
            }
        }
    }
)

router.afterEach(() => {
    NProgress.done()
})

router.onError((err) => {
    NProgress.done()
    console.error(err)
    Vue.$message({message:`发生异常:${err}`, type:'error'})
})