CV 系列 - 微信网页登陆回顾 - Vue Vue-Router Vuex Vant-ui Axios Webpack 串讲

时间 2019-11-07

标签系列微信网页登陆回顾 vue router vuex vant axios webpack 串讲栏目 HTML 繁體版

原文原文链接

很久没搞 Vue 了，之前都是很随便的糊 Vue 代码，此次认真糊了一下，发出来给带家一块儿回顾一下康康对不对致力于 CV 推广，CV 越快，下班越快javascript

这里只作最简洁的也比较实用的配置，各位带佬根据本身的实际需求去修改vue

有错或能够优化的地方还请各位老师帮忙指出，各位带善人点个赞吧。

Vuex 配置

在 src 目录下新建 store 文件夹，里面再建两个文件，store.js 和 md_wxuser.jsjava

个人主文件基本上都跟文件夹同名，若是我用 index 替代 store以及其余文件也是这样的风格，这会让我在文件栏那里看到一堆的 index.js，切换文件时会发现，这踏马一堆的 index.js 谁是谁啊，如下其余文件也是如此webpack

// md_user.js
const UPDATEWXUSER = 'UPDATEWXUSER' // 我也不知道为何要这样写，你们都这么写我也就这么写了，有没有带佬给弟弟我解释一下
export default {
  state: {
    // 不是在微信开发者工具里测试或开发登陆功能时，我会把 wxuser 给注释掉，把下面注释掉的放出来，这样就直接在 Chrome 里面开发就能够了
    wxuser: null,
    // wxuser: {
    // nickname: 'WSND',
    // sex: '1',
    // province: '广东',
    // city: '深圳',
    // country: '中国',
    // unionid: 'xxxxxxxxxxxxxxxxxxxx',
    // role: 'lecturer',
    // access_token: 'dddddddddddddddddddd'
    // }
  },
  mutations: {
    // 这里写个 mutation，以后会在 vue-router 的生命周期里面使用
    // 存储微信用户信息
    [UPDATEWXUSER](state, value) {
      state.user = value
    }
  },
  actions: {
    // 习惯了用 actions 来 commit mutation，actions 作数据更新操做可使用 async await 的好处等等。
    updateWxuser({ commit }, value) {
      commit(UPDATEWXUSER, value)
    }
  },
  getters: {
    // 就返回上面的 wxuser 没啥好讲的......
    wxuser: state => state.wxuser
  }
}
复制代码

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import md_wxuser from './md_user.js' // 导入上面咱们写好的 md_user.js

Vue.use(Vuex)

const store = new Vuex.Store({
  modules:{ // 使用 modules 方式创建 store 之后项目大了会让你的项目比较清晰
    wxuser: md_user
  }
})

export default store
复制代码

vuex 的配置到此结束ios

Axios 配置

在 src 文件夹下创建 api 文件夹，文件夹下创建三个文件，http.js，install.js，interface.jsweb

// http.js
import axios from 'axios'
import QS from 'qs'
import store from '../store/store' //导入 Vuex store，
import { Toast } from 'vant' // 导入 vant 的提示组件

// 请求超时时间 -> 1分钟
axios.defaults.timeout = 60000

// 请求拦截器
axios.interceptors.request.use(
  config => {
    const { access_token } = store.getters.wxuser || {} // 假设你与后台通讯验证是 access_token 字段
    // 验证没那么高要求的基本上都是在 header 配置的吧，可能大家配置 token 或者 openid，这里举例 access_token
    config.headers['access_token'] = access_token || ''
    
    // 这里举个这个例子想告诉你们配置都不必定要按照我全部的代码
    // 具体看大家实际的方案来改，给你们展现的只是一个思路
    // 本身能够灵活更改一点，此处由于咱们的后台须要我 access_token 经过 post 请求 header 为 content-type
    // application/x-www-form-urlencoded 透过 post 的 data 传过去
    // config.data = QS.stringify({
    // ...QS.parse(config.data),
    // access_token
    // })
    return config
  },
  error => {
    return Promise.error(error)
  }
)

// 响应拦截器
axios.interceptors.response.use(
  response => {
    if (response.status === 200) {
      // 这里看我的需求，若是后端规范的话，就在这里作 Toast 轻提示，这里的 Toast 用的是 vant 的组件
      // const { code, msg } = response.data
      // if (code === -1) {
      // Toast.fail(msg)
      // }
      return Promise.resolve(response)
    } else {
      return Promise.reject(response)
    }
  },
  // 服务器状态码不是200的状况
  error => {
    if (error && error.response) {
      switch (error.response.status) {
        case 400:
          error.message = '请求错误'
          break
        case 401:
          error.message = '未受权，请登陆'
          break
        case 403:
          error.message = '拒绝访问'
          break
        case 404:
          error.message = `请求地址出错: ${error.response.config.url}`
          break
        case 408:
          error.message = '请求超时'
          break
        case 500:
          error.message = '服务器内部错误'
          break
        case 501:
          error.message = '服务未实现'
          break
        case 502:
          error.message = '网关错误'
          break
        case 503:
          error.message = '服务不可用'
          break
        case 504:
          error.message = '网关超时'
          break
        case 505:
          error.message = 'HTTP版本不受支持'
          break
        default:
          error.message = '请求错误'
          break
      }
    }
    // Toast 提示错误
    Toast.fail(error.message)
    return Promise.reject(err)
  }
)

// get 和 post 方法都用 Promise 封装，resolve 和 reject 拿到响应数据或处理错误

/** * get方法，对应get请求 * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] */
export function get(url, params) {
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params: params
      })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

/** * post方法，对应post请求 * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] */
export function post(url, params) {
  return new Promise((resolve, reject) => {
    // 防呆解释，这里我把 params 格式化是由于咱们的后台要求 Content-Type 为 application/x-www-form-urlencoded
    // 若是大家的 Content-Type 为 application/json 的话就不用作 QS.stringify(params) 的处理
    let data = QS.stringify(params)
    axios({
      url,
      method: 'post',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      data
    })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}
复制代码

// interface.js
// 这个文件只举简单的例子
import { get, post } from './http' // 导入咱们封装好的 get post

// 懒得在 dev prod env 设置 BASE_URL 的同窗 直接在这里写吧
const BASE_URL = 'http://192.168.1.xxx:8040'

// 这里 return 回来的是咱们直接写的 post，post return 出来的就是 Promise对象，那么 loginAndGetUser return 回来了 Promise，
// 咱们就能够在组件里用 await 的方式简洁的写，let res = await this.$api.loginAndGetUser()，
// 在业务里减小回调能够帮咱们更好的理解代码，有时候 await 也可让咱们按顺序完成异步请求
export const loginAndGetUser = params => {
  return post(`${BASE_URL}/getWaitChat`, {
    ...params
  })
}

// 这里咱们导出一个对象方便装在 Vue 上调用
export default {
  loginAndGetUser
}
复制代码

// install.js
import apiList from './interface'

const install = Vue => {
  if (install.installed) return

  install.installed = true

  Object.defineProperties(Vue.prototype, {
    // 此处挂载在 Vue 原型的 $api 对象上
    // 在组件实例里面 直接 this.$api.loginAndGetUser() 调用Api
    $api: {
      get() {
        return apiList
      }
    }
  })
}

export default install
复制代码

Vue-Router 配置

src 下新建 router 文件夹，文件夹下新建 router.js 文件vue-router

import Vue from 'vue'
import Router from 'vue-router'
import store from '../store/store' // 导入 store
import { post } from '../api/http' // 导入封装好的 post
import { Dialog } from 'vant' // 此处本人最近的项目须要，非必须

Vue.use(Router)

const router = new Router({
  mode: 'history',
  base: 'msgmanage', 
  // 提醒，用了 base，记得去/config/index.js 下面 assetsPublicPath 
  // 改成 '/xxxxxx/' 这里的xxxx跟你的 base 同名，例如 assetsPublicPath:
  // '/msgmanage/'，理解不了的去问大家的后端为何这样作，这里不作解释
  routes: [
    {
      path: '/',
      name: 'index',
      component: () => import('../pages/index/index.vue')
    }
  ]
})

// 在 router 里作登陆处理
// 微信网页登陆原理这里就不讲了，只讲怎么优化流程
router.beforeEach(async (to, from, next) => {
  const appid = 'xxxxxxxxxxxxxxxxxx' // 你的公众号appid
  const redirect_uri = `${window.location.href}` // redirect_uri 至关于访问的域名，这样写就能够了
  const {
    query: { code = null }, // 根据实际须要，这里能够只把 url 里的 code 结构出来就能够了
    name,
    path,
    meta
  } = to // to 里面的对象能够自行打印出来，取出你会用到的东西
  // 咱们以前在 vuex store 里存储了 wxuser 数据页面一刷新，wxuser就没了，因此咱们这里作一下页面本地存储
  // 若是刷新页面的话直接从 sessionStorage 读回来，
  if (sessionStorage.getItem('wxuser')) {
    // 存储用户信息
    store.dispatch('updateUserInfo', JSON.parse(sessionStorage.getItem('wxuser')))
  }
  // 若是咱们是正常进来这里的 wxuser 是 null
  const wxuser = store.getters.user
  // 咱们在本地作开发的时候上面的 wxuser 就不是 null ,不会执行这里面的微信网页登陆业务逻辑
  if (wxuser === null) {
    // 若是没有 code 跳转 获取 code
    if (!code) {
      return (window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=123&connect_redirect=1#wechat_redirect`)
    }
    // 用微信的 code 跟后台登陆，把data 和 result 解构出来
    let { data, result } = await post(
      'http://192.168.1.xxx:8040/login',
      {
        code
      }
    )
    // 咱们后台规定正常和成功的请求时result.errCode的值为0
    if (result.errCode === 0) {
      // 防止页面刷新作的存储，对应上面的页面刷新先读取sessionStorage
      sessionStorage.setItem('wxuser', JSON.stringify(data))
      // 存储至 vuex store
      store.dispatch('updateUserInfo', data)
    } else {
      // 我的业需求 未受权使用 vant 的 Dialog 组件提示 而且 return 直接页面白屏中断后续
      Dialog.alert({
        title: '未受权',
        message: `您的受权码是 ${result.errMsg} 复制您的受权码发送给管理员完成受权后从新打开该网页`
      })
      return
    }
  }

  next() // 不要忘了 next()
})

export default router
复制代码

Webpack 配置

要在微信开发者工具正常使用微信跳转微信登陆须要修改 webpack 的配置以及本地系统上的 hosts 静态映射vuex

// /config/index.js
module.exports = {
    dev: {
        host: '192.168.1.140', // 改成你本地的ip地址
        port: 80,// 端口改成 80 端口
    }
}
复制代码

// /build/webpack.dev.conf.js
const devWebpackConfig = merge(baseWebpackConfig, {
    devServer: {
        disableHostCheck: true // 加上这个属性
    }
})
复制代码

// 本地系统 hosts 文件
192.168.1.140        xxx.testest.com 
# 这里的 xxx.testest.com 域名去找大家后端拿，不给你就让他爬，其余的方法弟弟我也不懂
# 在微信开发者网页开发模式浏览器地址栏直接输入xxx.testest.com 就能够映射到你的项目了
复制代码

main.js

最后这里直接粘贴复制吧，没啥好讲的json

import Vue from 'vue'
import App from './App'
import router from './router/router' // 导入 router
import store from './store/store' // 导入 vuex 的 store
import api from './api/install' // 导入接口
import vant from 'vant' // vant 挺好用的，推荐使用

Vue.use(vant)


Vue.use(api)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})
复制代码