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

前端後端 控制權限

• 後端的確也是有權限驗證的，但它的驗證實際上是針對業務來劃分的，好比超級編輯能夠發佈文章，而實習編輯只能編輯文章不能發佈，但對於前端來講無論是超級編輯仍是實習編輯都是有權限進入文章編輯頁面的。
• 還在更新中。。。