vue-admin-template后台管理之权限篇

前言：

在开发后台管理项目时，多用户多角色不同权限的场景可以说是非常普遍的。从零开始手写一个后台，要考虑的东西很多，这里直接拿网上大家比较熟悉的vue-admin-template后台模版来进行改造。
也可以看比较完整的前端开发https://www.jianshu.com/p/12ef029e3ab2
对应视频教程
先来看下vue-admin-template这个模版的代码目录结构

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── icons                  # 项目所有 svg icons
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

该模版使用了mock数据，可能对于不会mock的人有点生涩，比如作者本人
所以，我打算把mock删了，自己模拟数据，就是那种自己写json数据，写死，后端接口好了，直接请求接口把这些假数据替换下来就ok了。接下来的教程可以比较啰嗦，各位挑着看吧，不喜勿喷，毕竟不是专业做教程的。

第一步，我们先来看看最后的成果展示

login.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

比如我们用财务这个用户去登录一下后台，（先给财务这个角色分配一下权限）

image.png

比如给他分配培训认证全部的权限

image.png

然后财务管理员登录后台,只渲染所拥有的权限动态渲染了侧边栏。

image.png

补充一下：这里是按钮权限的设置，全局配置一个指令，到时候
v-permission='['add']'就可以实现按钮是否显示。

image.png

基本上就是这么个东西，先添加菜单，在新建一个角色，再给这个角色分配一下权限，然后在新建个用户，账号密码配置一下，再给这个用户分配一个角色，最后这个用户登录后台，就展示所拥有的权限，动态去渲染侧边栏

第二步 ： 我们先来启动一下vue-admin-template这个模版，安装依赖 cnpm install启动：npm run dev

image.png

image.png

可以看到，全是英文的，我是受不了，（英文烂的一逼，看不懂），侧边栏是手写的英文，删掉就好了，element-ui 是英文的，这个要改一下配置。

修改路径  src/main.js
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI) 

这样就好了

image.png

当然要先实现正常登录，我这里用下真实的登录接口，修改一下src/api/user.js

image.png

.env.development

image.png

vue.config.js配置反向代理，然后重启项目

image.png

箭头标注的根据实际情况修改

image.png

这样实际是触发登录接口了，为啥没登录进去呢，因为登录成功后，会立即触发getinfo 这个接口，这个接口请求出错，就会清除token且又回到登录页了。
所以接下来要完善getinfo这个接口，先来看下逻辑
1.执行完登录请求后，会走 permission.js中的逻辑

image.png

可以看到getinfo，所以就要完善getinfo这个接口，同样换成真实的。

image.png

store/modules/user.js根据实际情况修改下getinfo这个方法，这里看自己公司要求，我们只是取到昵称和头像存起来，也可以在这个方法直接把该用户所拥有的权限拿到并保存到vuex，建议在起一个接口，模拟的话我先在这个方法里把路由信息写死，然后在定一个存储到vuex的方法

const getDefaultState = () => {
  return {
    token: getToken(),
    name: '',
    avatar: '',
    menus: "",//新增
  }
}

const mutations = {
  RESET_STATE: (state) => {
    Object.assign(state, getDefaultState())
  },
  SET_TOKEN: (state, token) => {
    state.token = token
  },
  SET_NAME: (state, name) => {
    state.name = name
  },
  SET_AVATAR: (state, avatar) => {
    state.avatar = avatar
  },
  // 新增
  SET_MENUS: (state, menus) => {
    state.menus = menus
  }
}


// get user info
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo().then(response => {
        //用户信息是根据token返回的，
        //我们把token放到header里自动带过去了，这里就把state.token删掉了
        const { data } = response

        if (!data) {
          return reject('Verification failed, please Login again.')
        }

        const { nickname, avatar } = data
        // 模拟请求数据
        const menus = [
          {
            "path": "/system",
            "redirect": "/menu",
            "component": "Layout",
            "meta": {
              "title": "系统管理",
              "icon": "form"
            },
            "children": [{
              "path": "/menu",
              "name": "menu",
              "component": "menu/index",
              "meta": {
                "title": "菜单管理",
                "icon": "table",
              }
            },
            {
              "path": "/roles",
              "name": "roles",
              "component": "roles/index",
              "meta": {
                "title": "角色管理",
                "icon": "table",
              }
            },
            {
              "path": "/administrator",
              "name": "administrator",
              "component": "dashboard/index",
              "meta": {
                "title": "用户管理",
                "icon": "table"
              }
            }
            ]
          }

        ]
        //如果需要404 页面，请在此处添加
        menus.push({
          path: "/404",
          component: "404",
          hidden: true
        }, {
          path: "*",
          redirect: "/404",
          hidden: true
        })
        commit('SET_NAME', nickname)
        commit('SET_AVATAR', avatar)
        commit("SET_MENUS", menus) // 触发vuex SET_MENUS 保存路由表到vuex
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  }

getters.js

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,
  menus: state => state.user.menus //新增
}
export default getters

登录成功后，可以看到vuex里已经把昵称和头像和路由表信息存进去了。

image.png

下面把 router.js中的路由先删掉，保留必要的路由。

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'dashboard' }
    }]
  }
]

image.png

继续，可以看到，后端返给我们的是 "component": "Layout",是一个字符串，我们要把过滤下这段路由表信息，并且addrouter到路由里去，并全局挂载一个global.antRouter ，渲染的时候会用到

先在router这个目录下新建两个js文件，开发环境和生产环境导入组件的方式略有不同

_import_development.js

// 开发环境导入组件
module.exports = file => require('@/views/' + file + '.vue').default // vue-loader at least v13.0.0+

_import_production.js

// 生产环境导入组件
module.exports = file => () => import('@/views/' + file + '.vue')

然后在permission.js中引入刚创建的js文件

const _import = require('./router/_import_' + process.env.NODE_ENV) // 获取组件的方法

permission.js改造成下面这样，不明白的地方看注释

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'
import Layout from '@/layout'
const _import = require('./router/_import_' + process.env.NODE_ENV) // 获取组件的方法

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

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

router.beforeEach(async (to, from, next) => {
  // start progress bar
  NProgress.start()

  // set page title
  document.title = getPageTitle(to.meta.title)

  // determine whether the user has logged in
  const hasToken = getToken()

  if (hasToken) {
    if (to.path === '/login') {
      // if is logged in, redirect to the home page
      next({
        path: '/'
      })
      NProgress.done()
    } else {
      const hasGetUserInfo = store.getters.name
      if (hasGetUserInfo) {
        next()
      } else {
        try {
          // get user info
          await store.dispatch('user/getInfo') // 请求获取用户信息
          if (store.getters.menus.length < 1) {
            global.antRouter = []
            next()
          }
          const menus = filterAsyncRouter(store.getters.menus) // 1.过滤路由
          console.log(menus);
          
          router.addRoutes(menus) // 2.动态添加路由
          global.antRouter = menus // 3.将路由数据传递给全局变量，做侧边栏菜单渲染工作
          next({
            ...to,
            replace: true
          })
          // next()
        } catch (error) {
          // remove token and go to login page to re-login
          console.log(error);
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    /* has no token*/

    if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly
      next()
    } else {
      // other pages that do not have permission to access are redirected to the login page.
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  // finish progress bar
  NProgress.done()
})
// // 遍历后台传来的路由字符串，转换为组件对象
function filterAsyncRouter(asyncRouterMap) {
  const accessedRouters = asyncRouterMap.filter(route => {
    if (route.component) {
      if (route.component === 'Layout') {
        route.component = Layout
      } else {
        route.component = _import(route.component) // 导入组件
      }
    }
    if (route.children && route.children.length) {
      route.children = filterAsyncRouter(route.children)
    }
    return true
  })
  
  return accessedRouters
}

下面在改造下layout/components/Sidebar/index.vue

computed: {
    ...mapGetters([
      'sidebar'
    ]),
    routes() {
      //return this.$router.options.routes
      return this.$router.options.routes.concat(global.antRouter) //把路由concat进去
    },

这时候登录成功会报错

image.png

原因就是 没有提前建好页面。新建一下路由表内的几个页面就行了
然后就成功了 有木有！！

image.png

下面我打算换成真实的接口数据，真正实现开篇的成果展示，下面的打算录制成视频，对应视频教程，点我去看视频