vuejs2.0 vsCode router先后端分离权限 vueAdmin后台基础模板

感受不错的开源项目，因此搜集资料来细致的剖析，帮助更多人尽快步入后台系统的开发，其实后台项目有两个最基础最重要的东西就是：权限验证和安全性，关于VSCode是最近很火的编辑器不作过多说明，下面的参考资料有详细讲解

第三方参考资料

1. 手摸手，带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)
2. 导航守卫
3. 请求、响应拦截器
4. me-admin-template开发文档
5. me-admin-template
6. me-admin-template在线预览地址
7. 一代女前辈赛冷思sls-admin-vue在线预览地址
8. 让我启蒙的花裤衩vueAdmin-template在线预览地址

---

根据环境读取配置

• 在项目中新建 config 文件夹
• 添加 index.js 并写入export default require('./_' + process.env.NODE_ENV)
• 根据vue-cli生成的环境变量(根目录config设置)有三个环境:development,testing,production,config 目录结构以下所示

vue-cli 默认只提供了dev和prod两种环境。但其实正真的开发流程可能还会多一个sit或者stage环境，就是所谓的测试环境和预发布环境。因此咱们就要简单的修改一下代码。其实很简单就是设置不一样的环境变量

"build:prod": "NODE_ENV=production node build/build.js",
"build:sit": "NODE_ENV=sit node build/build.js",

以后在代码里自行判断，想干就干啥

var env = process.env.NODE_ENV 
=== 'production' ? config.build.prodEnv : config.build.sitEnv

建议使用npm install --registry=https://registry.npm.taobao.org安装依赖包使用cnpm install或者update 它的包是一个link，会有各类诡异的bug

---

添加请求、响应拦截器，@/_extends/ui，在_extends中定义公共弹框以及进度条经过index向外提供方法接口

import axios from 'axios'
import _config from '@/_config'
import $ui from '@/_extends/ui'
// import qs from 'qs'

const instance = axios.create({
  baseURL: _config.apiBaseUrl, // api的base_url
  timeout: 10000 // 请求超时时间
  // transformRequest: data => qs.stringify(data)
})
// request拦截器
instance.interceptors.request.use(
  e => {
    e.method = _config.isMockTest ? 'GET' : e.method
    e.url = _config.suffix ? e.url + _config.suffix : e.url
    e.params = e.params || {}
    e.headers = e.headers || {}
    if (localStorage.token) {
      e.headers['Authorization'] = localStorage.token
      //后端会验证每个涉及请求的操做，验证其是否有该操做的权限，
      //每个后台的请求无论是 get 仍是 post 都会让前端在请求 
      //header里面携带用户的 token，后端会根据该 
      //token 来验证用户是否有权限执行该操做。
    }
    return e
  },
  error => ({ status: 0, msg: error.message })
)
// respone拦截器
instance.interceptors.response.use(
  response => {
    const resp = response.data
    if (resp && resp.status === 0 && resp.msg) {
      $ui.pages.warn(resp.msg)
    }
    if (response.status === 200) {
      return resp
    }
    return response
  },
  error => {
    const err = { status: 0, msg: '服务器异常' }
    if (
      error.message &&
      (error.message.indexOf('403') > -1 || error.message.indexOf('401') > -1)
    ) {
      err.msg = '权限校验失败，请从新登陆'
    }
    $ui.pages.warn(err.msg)
    console.log('err' + error) // for debug
    return Promise.reject(err)
  }
)

export default instance

用户登陆成功以后，咱们会在全局钩子router.beforeEach中拦截路由，判断是否已得到token，在得到token以后咱们就要去获取用户的基本信息了

• 登陆：当用户填写完帐号和密码后向服务端验证是否正确，验证经过以后，服务端会返回一个token，拿到token以后（我会将这个token存贮到cookie中，保证刷新页面后能记住用户登陆状态），前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息（如用户权限，用户名等等信息）
• 权限验证：经过token获取用户对应的 role，动态根据用户的 role 算出其对应有权限的路由，经过 router.addRoutes 动态挂载这些路由
• 两步验证：其实就是帐号密码验证以后绑定第三方平台，登录成功后不重定向到首页而是弹出第三方平台登录窗口

scrollBehavior，前端路由切换新路由想要页面滚动到顶部

import Vue from 'vue'
import Router from 'vue-router'
import { routes } from './routes'
import logic from './logic'
Vue.use(Router)

const router = new Router({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) return savedPosition
    const position = {}
    if (to.hash) {
      position.selector = to.hash
    }
    position.x = 0
    position.y = 0
    return position
  },
  routes
})
router.beforeEach(logic.beforeEach)
router.afterEach(logic.afterEach)

export default router

前端后端 控制权限

• 后端的确也是有权限验证的，但它的验证实际上是针对业务来划分的，好比超级编辑能够发布文章，而实习编辑只能编辑文章不能发布，但对于前端来讲无论是超级编辑仍是实习编辑都是有权限进入文章编辑页面的。
• 还在更新中。。。