Vue：中小型项目前端架构

一、代码环境二、关于网络请求1、名词解释2、设计思路3、请求拦截器4、响应拦截器 三、关于路由封装1、路由守卫2、H5端路由规则3、APP内嵌页路由规则 四、关于APP交互1、基础交互2、安全 五、关于支付

一、代码环境

项目总体上，主要使用 vue2 + typeScript + scss 实现

用到的库：vue-router 3.2 + axios + vuex 3.4 + vant 2.12

由于vue2对ts支持不好，所以使用了 vue-property-decorator 提高TS的使用体验

二、关于网络请求 1、名词解释 token：用户登录成功，后台生成的唯一id，用于鉴定用户的权限secret_key：参与传输数据的签名refresh_token：用于刷新token，重置token的过期时间 2、设计思路 用户登录后，后端生成token、secret_key、refresh_token，并设置token和refresh_token过期时间，refresh_token过期时间会比token长；token即将过期时，可以使用refresh_token换取新的token和refresh_token，并重置token过期时间；
3、请求拦截器 请求头携带上token、uuid、渠道、包名、版本号；有版本号方便做兼容需要签名的接口，请求头携带签名；签名算法：MD5 4、响应拦截器

请求成功的情况下，通过判断后端返回的状态码做出不同 *** 作。

token过期：删除本地token等用户数据，跳转登录页面；token即将过期：前端请求接口重置token过期时间，此时promise仍处于pending状态，再重发一次用户的请求，获取到数据后返回给用户，并结束promise的pending状态； 三、关于路由封装

路由模块由一个路由规则文件和多个路由文件组成，路由文件以功能模块划分

import {test1 } from '@/router/test1';
import {test2} from '@/router/test2';

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [ ...test1 ,  ...test2 ]
})

1、路由守卫

根据不同的环境执行不同的路由规则

router.beforeEach(async (to:any, from:any, next) => {
	//小程序环境是异步获取，所以要加用到 await 
  	const isMiniprogram = await _getMiniprogramEnv()
  	if(isMiniprogram) {
    	miniRputer(to, from, next)
  	}else if(store.state.isApp){
    	appRputer(to, from, next)
  	}else{
    	h5Rputer(to, from, next)
  	}
}）

2、H5端路由规则

获取token确认用户是否登录；获取路由配置，判断用户前往的页面是否需要登录；根据两个状态决定进去下一页还是跳转登录

3、APP内嵌页路由规则

获取路由配置，判断下一个页面是否为APP原生页面，如果是则调用方法通知APP跳转原生页面；

四、关于APP交互 1、基础交互

APP与H5交互主要依赖于window对象；

安卓在window定义一个js方法xxx，H5通过window.xxx()去调用。为了防止变量污染，建议再套一层对象，如window.xxxxx.xxx()；

ios则是在window.webkit.messageHandlers上定义js方法；ios需要调用window.webkit?.messageHandlers[this.fnName].postMessage(param)传递数据。注意，ios的postMessage方法只接收一个参数

2、安全

考虑到H5的代码有泄露风险，攻击者可能伪造交互代码，通过APP发送给其他用户，其他用户进入伪造的页面后，攻击者可以获取到该用户的token等数据。

解决方案：APP内设置域名白名单，非白名单中的域名不返回敏感数据

五、关于支付

支付方式：微信浏览器内公众号支付、外部浏览器微信支付、支付宝支付

微信浏览器内公众号支付：

调用微信私有接口WeixinJSBridge的getBrandWCPayRequest方法，并传入所需参数通过回调函数的返回值，判断支付是否成功

外部浏览器微信支付、支付宝支付：

点击付款，请求后端接口后端返回支付链接（微信网页的链接）前端跳转该链接，d出微信支付的密码验证支付完成