一、目录结构

• assets放置了静态文件
• components放置了通用组件
• config放置了一些常量配置
• helper放置了主要的功能模块比如ajax.js、api.js
• mixins放置了混入
• router放置了路由文件
• store放置了vuex的文件
• views放置了页面文件

目录结构

二、 鉴权

项目的登陆状态由Vuex+LocalStorage维持，项目的鉴权主要靠 路由鉴权 和 Ajax鉴权。

store结构

store结构

state，localStorage维持了登陆信息的持久化

const state = {
  userInfo: $storage.getLocalStorage('userInfo') || {}
}

设置和删除userInfo的都放在mutation里

import { $storage } from '@/helper'

export default {
  setUserInfo (state, info) {
    state.userInfo = info
    $storage.setLocalStorage('userInfo', info)
  },
  deleteUserInfo (state) {
    state.userInfo = null
    $storage.removeLocalStorage('userInfo')
  }
}

向服务器获取userInfo放在action里（异步类型的）

import { $apis } from '@/helper'
export default {
  async getUserInfo ({ commit, state }) {
    let userId = state.userInfo.id
    if (userId) {
      $apis.getUserInfo(userId).then(res => {
        commit('setUserInfo', res)
      })
    }
  }
}

auth文件

实际上router鉴定权限调用的都是这两个方法，把它们分离出一个文件，用来检查有没有userInfo和userInfo是否是Admin的权限。

import { $apis, $storage } from '.'

export default {
  checkSession () {
    return $storage.getLocalStorage('userInfo') || false
  },

  async checkAdmin () {
    let userInfo = $storage.getLocalStorage('userInfo') || {}
    let userId = userInfo.id || 0
    if (!userId) return false
    userInfo = userInfo || (await $apis.getUserInfo(userId))
    let isAdmin = userInfo.permission < 2
    return userInfo.id && isAdmin
  }
}

router结构

router结构

鉴权这里用的是全局前置守卫，所以在beforeEachHooks.js写上鉴定权限的规则。
规则：在需要admin权限的地方无权限访问，则会跳到404页面；在需要登陆权限的地方无权限访问，则会跳到login界面。

import { $auth } from '@/helper'
export default {
  checkVisitAuth (to, from, next) {
    if (to.meta.isNeedAdmin) {
      $auth.checkAdmin().then(result => {
        return result ? next() : next({ path: '/404' })
      })
    } else if (to.meta.isNotNeedLogin) {
      next()
    } else {
      $auth.checkSession() ? next() : next({ path: '/login' })
    }
  }
}

在index.js处挂载该规则

Object.values(beforeEachHooks).forEach(hook => {
  routerInstance.beforeEach(hook)
})

Ajax

用了一层requestHandle来封装 axios，以后可能会改用interceptors来定制，比较符合通用的做法。
后端返回 401 就是没有登陆或者登陆信息过期，这时候清空登陆缓存状态，然后重定向到登陆页面。
后端返回 403 就是没有权限访问，由于本项目403也是跳到404页面所以和404同用一个处理方式。
后端返回 415 是访问api过多被限制。

/**
 * @param url
 * @param method get|post|put|delete...
 * @param params like queryString. if a url is index?a=1&b=2, params = {a: '1', b: '2'}
 * @param data post data, use for method put|post
 * @returns {Promise}
 */
function requestHandle (url, method, options) {
  if (options !== undefined) {
    var { params = {}, data = {} } = options
  } else {
    options = {}
  }
  return new Promise((resolve, reject) => {
    axios({
      url,
      method,
      params,
      data
    })
      .then(
        res => {
          if (res.status === 200 || res.status === 201 || res.status === 204) {
            resolve(res.data)
          } else {
            reject(res)
          }
        },
        err => {
          if (err.response.status === 401) {
            store.commit('deleteUserInfo')
            Vue.prototype.$error('请登陆')
            window.location.href = '/login'
            reject(err)
          } else if (
            err.response.status === 403 ||
            err.response.status === 404
          ) {
            reject(err.response.data)
          } else if (err.response.status === 415) {
            Vue.prototype.$error('您访问太过频繁, 已被限速')
            reject(err.response.data)
          }
        }
      )
      .catch(err => {
        Vue.prototype.$error(err)
        reject(err)
      })
  })
}

总体结构

实际上该项目的鉴权就是路由拦截那些正常的权限缺失，减少后端压力，而在登陆信息过期或者恶意修改登陆信息的会遭到后端的铁拳制裁😄，后端必须要有完整的鉴权系统才能是健壮的。