微信小程序mpvue+vantUI+flyio+vuex入坑(3)

• 微信小程序mpvue+vantUI+flyio+vuex入坑(1)
• 微信小程序mpvue+vantUI+flyio+vuex入坑(2)

好久以後才更新，一個是比較忙，還有就是不知道還要介紹啥，最近有小夥伴問我，怎麼鑑權之類的，我就分享一下個人鑑權。

項目結構

先看看項目結構

├── build           # webpack文件，配置參數,打包的代碼存放在這裏。
  ├── config          # vue項目的基本配置文件
  ├── node_modules    # 項目中安裝的依賴模塊
  ├── src             # 源代碼文件夾
      └── api         # 請求接口文件
      └── components  # 放置各個vue組件文件
      └── pages       # 各個頁面文件
      └── store       # 項目的狀態管理文件，包括登陸，用戶信息和token等
      └── style       # 項目公共樣式
      └── utils       # 項目公用的js文件
      └── app.json    # 小程序的app.json
      └── App.vue     # App.vue組件，項目入口文件
      └── main.js     # 項目的核心入口文件
  ├── static          # 靜態資源目錄，如圖片、字體等
      └── images         # 登陸加密配置文件
  ├── .babelrc        # babel編譯參數，vue開發須要babel編譯
  ├── .editorconfig   # 代碼編輯環境配置文件
  ├── .eslintignore   # eslint檢查忽略文件
  ├── .eslintrc.js    # eslint檢查配置文件
  ├── .gitignore      # git提忽略文件
  ├── .postcssrc.js   # css配置文件,自動補齊瀏覽器css前綴
  ├── index.html      # 主頁，項目入口文件
  ├── package.json    # 項目配置文件，，描述項目信息和依賴
  ├── README.md       # 項目的說明文檔，markdown 格式
複製代碼

Vuex的使用

首先安裝vuex

npm install vuex -S
複製代碼

建立store

建立好store目錄後，和普通vue的項目同樣，使用vuex

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user
  },
  state: {
    count: 0
  },
  mutations: {
    increment: (state) => {
      const obj = state
      obj.count += 1
    },
    decrement: (state) => {
      const obj = state
      obj.count -= 1
    }
  }
})

export default store
複製代碼

將store掛載到Vue上

配置要作狀態管理的內容

個人token信息就是存在user裏，利用小程序的storage來作持久化

const user = {
  state: {
    token: mpvue.getStorageSync('token'),
    userinfo: mpvue.getStorageSync('user')
  },
  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
    SET_USER: (state, user) => {
      state.userinfo = user
    }
 }
}
複製代碼

和普通vue項目的使用徹底同樣
在template裏直接$store.state.user.token就能夠直接獲取到，固然你也能夠寫getter來方便獲取 在js裏也是同樣 this.$store.state.user.token 也是能夠直接獲取到
固然mapState也可使用

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      userinfo: state => state.user.userinfo
    })
  }
 }
複製代碼

配置apiconfig，請求數據的鑑權

首先引入store

import store from '@/store'
複製代碼

請求攔截

對請求進行攔截處理，這個以前講flyio的時候也說過

// 添加請求攔截器
fly.interceptors.request.use(config => {
  const token = store.state.user.token
  // console.log(token)
  // 給全部請求添加自定義header
  config.headers['token'] = token
  if (config.headers['Content-Type'] !== 'application/json') {
    config.body = qs.stringify(config.body)
  }
  // 能夠顯式返回request, 也能夠不返回，沒有返回值時攔截器中默認返回request
  return config
}, error => {
  Promise.reject(error)
})
複製代碼

響應的鑑權攔截

由於小程序首次受權後，再次進入的時候可能會停留在上次進入的頁面，若是這個時候token已經失效，應該不讓用戶知道，偷偷的登陸

let reqCount = 0
// 響應攔截器
fly.interceptors.response.use(async response => {
  // 贊成處理一些響應的code狀態
  // do sthing
  // 只將請求結果的data字段返回
  console.log(response, response.request)
  // 判斷是否有響應，與後臺進行統一，若是是token失效過時之類的，就進入如下方法
  if (response.data && response.data.code === '00000') {
    // 從新登陸，而且記錄請求登陸的次數，登陸3次後仍失敗，跳轉到受權登陸頁面
    reqCount += 1
    if (reqCount < 3) {
        let data = await store.dispatch('wxLogin').then(async () => {
            // 登陸成功後，從新發起以前的請求拿到數據，返回
            let res = await fly.request(response.request).then(res => res)
            reqCount = 0
            return res
        })
    } else {
        mpvue.redirectTo({
          url: '/pages/login'
        })
    }
    return data
  } else {
    return response.data
  }
},
(err) => {
  // 發生網絡錯誤後會走到這裏
  wx.getNetworkType({
    success: res => {
      console.log(res)
      if (res.networkType === 'none') {
        wx.showToast({
          title: '當前網絡不可用，請檢查你的網絡設置',
          icon: 'none',
          duration: 2000
        })
      } else {
        wx.showToast({
          title: '服務器繁忙，請稍候再試',
          icon: 'none',
          duration: 2000
        })
      }
    }
  })
  console.log(err)
})、
複製代碼

小程序的受權判斷

因爲mpvue的進入都會從App.vue進入，因此我把受權寫在App.vue裏

mounted () {
    // 獲取用戶受權狀態
    mpvue.getSetting({
      success: (res) => {
        // 若是沒有受權的話，管他三七二十一，跳轉到登陸受權頁面，讓他去受權
        if (res.authSetting['scope.userInfo'] === undefined) {
          if (this.$router.currentRoute && this.$router.currentRoute.path !== '/pages/login') {
            mpvue.navigateTo({
              url: '/pages/login'
            })
            return false
          }
        } else if (res.authSetting['scope.userInfo'] !== undefined && res.authSetting['scope.userInfo'] !== true) {
          console.log('拒絕受權')
        } else {
          // console.log('已受權')
          // 已經受權，就調後臺的登陸接口，進行登陸
          this.$store.dispatch('wxLogin').then(() => {
            // 判斷當前進行登陸的動做發生的頁面，若是是登陸受權頁，就跳轉到首頁，不然留在當前頁面
            if (this.$router.currentRoute && this.$router.currentRoute.path === '/pages/login') {
              mpvue.switchTab({
                url: '/pages/index'
              })
            }
          })
        }
      },
      fail: res => {
        console.log(res)
      }
    })
  }
複製代碼