vue后台管理项目

简单记录一下使用vue-element-admin

后台项目我采用的是vue-element-admin后台模板，我们下载下来做下改造。

1.关闭自带的mock

   1-1 去除main.js

// if (process.env.NODE_ENV === 'production') {
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

 1-2 vue.config.js加入

  devServer: {
    port: 5001,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/': {
        target: `xxx.com`,//要代理的地址
        changeOrigin: true,
        pathRewrite: {
          '^/': ''//代理后的地址
        }
      }
    },
    after: require('./mock/mock-server.js')
  }

使用的话，正常使用比如  '/getList'

2.路由修改

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from '@/layout'
//固定的路由
export const constantRoutes = [
  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path(.*)',
        component: () => import('@/views/redirect/index')
      }
    ]
  },
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/auth-redirect',
    component: () => import('@/views/login/auth-redirect'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/error-page/404'),
    hidden: true
  },
  {
    path: '/401',
    component: () => import('@/views/error-page/401'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/views/dashboard/index'),
        name: 'Dashboard',
        meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
      }
    ]
  }
]

//动态路由不确定
export const asyncRoutes = [
  {
    path:'/data',
    component:Layout,
    redirect:'/data/create',
    meta:{title:'数据管理',icon:'documentation',roles:['admin','editor']},
    children:[
      {
        path:'/data/create',
        component:()=>import('@/views/data/create'),
        meta: { title: '添加数据', icon: 'edit', roles: ['admin'] }
      },
      {
        path:'/data/edit',
        component:()=>import('@/views/data/edit'),
        hidden:true,//隐藏不在侧边栏显示
        meta: { title: '编辑数据', icon: 'edit', roles: ['admin'],activeMenu:'/data/list' }
        //activeMenu当路由为'/data/edit',侧边栏高亮对应'/data/list'
      },
      {
        path:'/data/list',
        component:()=>import('@/views/data/list'),
        meta: { title: '数据列表', icon: 'list', roles: ['editor'] }
      }
    ]
  },
  //都匹配不到跳转404页面
  { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => new Router({
  // mode: 'history', // require service support
  //切换路由滚到头部
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

3.权限判断

首先判断是否存在token:

没有token判断要去的页面是否需要token，不需要直接跳转，需要跳转登录页面并且带上要去的页面。

有token的时候如果要去登录页面，直接跳转主页面。不是登录页面的话，在判断是否存在用户信息，通过用户信息生成动态路由

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 })
//白名单不需要token
const whiteList = ['/login', '/auth-redirect'] 

router.beforeEach(async(to, from, next) => {
  NProgress.start()
  //修改顶部名字
  document.title = getPageTitle(to.meta.title)
  //获取token
  const hasToken = getToken()

  if (hasToken) {
    if (to.path === '/login') {
      //如果有token且要去的页面是登录页面，直接跳到主页面
      next({ path: '/' })
      NProgress.done() 
    } else {
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      //判断是否拥有用户信息
      if (hasRoles) {
        next()
      } else {
        try {
          //获取用户信息
          const { roles } = await store.dispatch('user/getInfo')
          //根据用户动态生成路由
          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
          router.addRoutes(accessRoutes)
          next({ ...to, replace: true })
        } catch (error) {
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has 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()
})

 前面说没有token前往登录页面，现在分析登录页面。

  watch: {
    //监听路由变化获取路由参数，登录后需要跳转的页面和参数
    $route: {
      handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },

其中getOtherQuery为页面所带参数

 getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }

this.$store.dispatch('user/login', this.loginForm)
   .then(() => {
        //登录成功跳转到输入路由，携带参数
        this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
        this.loading = false
     })
      .catch(() => {
         this.loading = false
    })

这里登录触发 dispatch('user/login')，来看一下这里面发生了什么

 commit('SET_TOKEN', data.token)
 setToken(data.token)
//登录获取信息把token存起来

 

刚才permission中

const { roles } = await store.dispatch('user/getInfo')
 //getInfo通过存起来的token获取用户信息
 //根据用户动态生成路由
const accessRoutes = await store.dispatch('permission/generateRoutes', roles)//获取到action动态生成的路由
     router.addRoutes(accessRoutes)

权限判断中

  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      let accessedRoutes
      //用户是admin拥有所有权
      if (roles.includes('admin')) {
        accessedRoutes = asyncRoutes || []
      } else {
        //不是超级管理员进入filterAsyncRoutes函数判断
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
       }
      commit('SET_ROUTES', accessedRoutes)//把动态生成路由存起来
      resolve(accessedRoutes)//返回生成动态路由
    })
  }

export function filterAsyncRoutes(routes, roles) {
  const res = []

  routes.forEach(route => {
    const tmp = { ...route }
    debugger
    if (hasPermission(roles, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      //满足条件存起来
      res.push(tmp)
    }
  })

  return res
}

function hasPermission(roles, route) {
  //判断路由是否存在与用户相同权限将会返回true
  //路由不需要角色判断也会返回true

  if (route.meta && route.meta.roles) {
    return roles.some(role => route.meta.roles.includes(role))
  } else {
    return true
  }
}