权限

permission

↓

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'

NProgress.configure({ showSpinner: false }) // NProgress Configuration

const whiteList = ['/login'] // no redirect whitelist

router.beforeEach(async(to, from, next) => {
  // 开始进度条
  NProgress.start()
  // 设置页面标题
  document.title = getPageTitle(to.meta.title)
  // 如果有token
  if (getToken()) {
    if (to.path === '/login') {
      // 如果已登录，请重定向到主页
      next({ path: '/' })
      NProgress.done()
    } else {
      if (store.getters.name === '1') {
        next()
      } else {
        try {
          console.log(store.getters.name)
          if (store.getters.name == '') {
            // 获取用户信息
            await store.dispatch('user/getInfo')
            // 模拟拿到后台树结构
            const fakeRouter = {
              'router': [
                // {
                //   'path': '/',
                //   'component': 'Layout',
                //   'redirect': '/dashboard',
                //   'children': [{
                //     'path': 'dashboard',
                //     'name': 'Dashboard',
                //     'component': 'dashboard/index',
                //     'meta': {
                //       'title': 'Dashboard',
                //       'icon': 'dashboard'
                //     }
                //   }]
                // },
                {
                  'path': '/example',
                  'component': 'Layout',
                  'redirect': '/example/table',
                  'name': 'Example',
                  'meta': {
                    'title': 'Example',
                    'icon': 'example'
                  },
                  'children': [
                    {
                      'path': 'table',
                      'name': 'Table',
                      'component': 'table/index',
                      'meta': {
                        'title': 'Table',
                        'icon': 'table'
                      }
                    },
                    {
                      'path': 'tree',
                      'name': 'Tree',
                      'component': 'tree/index',
                      'meta': {
                        'title': 'Tree',
                        'icon': 'tree'
                      }
                    }
                  ]
                },
                {
                  'path': '/form',
                  'component': 'Layout',
                  'name': 'Form',
                  'children': [
                    {
                      'path': 'index',
                      'name': 'Form',
                      'component': 'form/index',
                      'meta': {
                        'title': 'Form',
                        'icon': 'form'
                      }
                    }]
                }
              ]
            }
            console.log('获取后台树结构', fakeRouter)
            const accessRoutes = await store.dispatch('permissionRouter/generateRoutes', fakeRouter)
            // console.log('最后获取的路由', accessRoutes)
            // 动态添加可访问路由
            await router.addRoutes(accessRoutes)
            // // 设置replace:true，这样导航就不会留下历史记录
            next({ ...to, replace: true })
          } else {
            next()
          }
        } catch (error) {
          // 移除token并转到登录页以重新登录
          await store.dispatch('user/resetToken')
          console.log('移除token，返回登录页')
          Message.error(error || 'Has Error')
          // next(`/login?redirect=${to.path}`)
          next(`/login`) // 否则全部重定向到登录页
          NProgress.done()
        }
      }
    }
  } else {
    /* has no token*/
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免费登录白名单中，直接进入
      next()
    } else {
      // 没有访问权限的其他页将重定向到登录页
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  NProgress.done() // 结束Progress
})








store↓permissionRouter

import { constantRoutes } from '@/router'

// 递归过滤异步路由表
// 路由异步路由
function filterAsyncRoutes(routes) {
  if (!routes) return false
  const res = []
  routes.forEach(route => {
    // console.log('递归', route)
    const tmp = {
      path: route.path,
      children: route.children || [],
      name: route.routerName,
      meta: {
        noCache: route.keepAlive === '0' || 0,
        title: route.name,
        icon: route.icon
      }
    }
    if (route.component) {
      switch (route.component) {
        case 'Layout':
          tmp.component = resolve => require([`@/layout/index.vue`], resolve)
          break
        default:
          tmp.component = resolve => require([`@/views/${route.component}`], resolve)
          break
      }
    }
    if (tmp.children) {
      tmp.children = filterAsyncRoutes(tmp.children)
    }
    // console.log('结果', tmp)
    res.push(tmp)
  })

  return res
}

const state = {
  'routes': [],
  'addRoutes': []
}
const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
    console.log(state.routes)
  }
}
const actions = {
  generateRoutes({ commit }, result) {
    return new Promise(resolve => {
      let menu = []
      console.log('树结构', result.router)
      if (result.router) {
        menu = JSON.parse(JSON.stringify(result.router))
      }
      console.log('树结构解析', menu)
      const accessedRoutes = filterAsyncRoutes(menu)
      // 在路由最后添加404页面
      accessedRoutes.push({ path: '*', redirect: '/404', hidden: true })
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}





getter ↓

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
  permission_routes: state => state.permissionRouter.routes
}
export default getters