feat: 引导页、广告页

4 years ago · 4aa76ff1ad
6 changed files with 111 additions and 21 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,4 +1,4 @@
-# 1.0.0 (2022-01-17)
+# 1.0.0 (2022-01-18)

 ### 🌟 新功能
 范围|描述|commitId
@ -33,6 +33,7 @@
 - | first commit | [8dc26de](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/8dc26de)
 project | 日常任务面板添加 | [b3f16ff](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/b3f16ff)
 theme | theme demo | [9175758](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/9175758)
+ - | token过期策略 | [8f16ae1](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/8f16ae1)
 - | vue3 | [12ed2ad](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/12ed2ad)


--- a/pages.json
+++ b/pages.json
@ -1,5 +1,19 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		{
+			"path": "pages/init/init",
+			"style": {
+				"navigationBarText": "TALL",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/guide/guide",
+			"style": {
+				"navigationBarText": "TALL",
+				"navigationStyle": "custom"
+			}
+		},
 		{
 			"path": "pages/index/index",
 			"style": {
--- a/pages/guide/guide.vue
+++ b/pages/guide/guide.vue
@ -0,0 +1,33 @@
+<template>
+  <!-- indicator-dots 是否显示面板指示点 -->
+  <!-- indicator-color 指示点颜色 -->
+  <!-- indicator-active-color 当前选中的指示点颜色 -->
+
+  <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay">
+    <swiper-item>
+      <view class="swiper-item uni-bg-red">
+        A
+      </view>
+    </swiper-item>
+    <swiper-item>
+      <view class="swiper-item uni-bg-green">B</view>
+    </swiper-item>
+    <swiper-item>
+      <view class="swiper-item uni-bg-blue">C</view>
+    </swiper-item>
+  </swiper>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  const background = ref(['color1', 'color2', 'color3']);
+  const indicatorDots = true;
+  const autoplay = false;
+</script>
+
+<style lang="scss" scoped>
+  .swiper {
+    height: 100%;
+  }
+</style>
--- a/pages/init/init.vue
+++ b/pages/init/init.vue
@ -0,0 +1,23 @@
+<template>
+  启动页
+</template>
+
+<script setup>
+  setTimeout(() => {
+    // 判断是否第一次打开App
+    let openNum = uni.$storage.getStorageSync('fistOpenApp');
+    if (openNum === 'true') {
+      uni.navigateTo({
+        url: '/pages/index/index'
+      })
+    } else {
+      uni.$storage.setStorageSync('fistOpenApp', 'true');
+      uni.navigateTo({
+        url: '/pages/guide/guide'
+      })
+    }
+  }, 3000);
+</script>
+
+<style>
+</style>
--- a/store/index.js
+++ b/store/index.js
@ -11,6 +11,7 @@ const state = {
  networkConnected: true, // 网络是否连接
  forceUseStorage: true, // 强制启用storage
  systemInfo: null, // 系统设备信息
+  count: 2, // 后台出错，多次返回错误的token信息导致的死循环，用count来阻止死循环
 };

 const getters = {
@ -48,6 +49,16 @@ const mutations = {
  setTheme(state, theme) {
    state.theme = theme || 'theme-default';
  },
+
+  /**
+   * 设置count
+   * 后台出错，多次返回错误的token信息导致的死循环，用count来阻止死循环
+   * @param {Object} state
+   * @param {Object} data
+   */
+  setCount(state, data) {
+    state.count = data;
+  },
 };

 export default createStore({
--- a/utils/request.js
+++ b/utils/request.js
@ -17,27 +17,31 @@ export function setupHttp(app) {

  // 请求拦截部分，如配置，每次请求前都会执行
  app.config.globalProperties.$u.http.interceptor.request = config => {
+    if (store.state.count === 0) {
+      return false;
+    }
+
    const token = store.state.user.token || storage.getStorageSync('anyringToken');
    if (token) {
      config.header.Authorization = `Bearer ${token}`;
    }

-    uni.getSystemInfo({
-      success: function(res) {
-        config.header.deviceId = res.deviceId;
-      }
-    })
-
+    config.header.deviceId = store.state.systemInfo.deviceId;
+    // #ifdef APP-PLUS
+    config.header.appType = 1;
+    // #endif
+    // #ifdef H5
+    config.header.appType = 0;
+    // #endif
    return config;
  };

  // 响应拦截，如配置，每次请求结束都会执行本方法
-  app.config.globalProperties.$u.http.interceptor.response = res => {
+  app.config.globalProperties.$u.http.interceptor.response = async res => {
+    // res为服务端返回值，可能有code，result等字段
+    // 这里对res.result进行返回，将会在this.$u.post(url).then(res => {})的then回调中的res的到
+    // 如果配置了originalData为true，请留意这里的返回值
    if (res.code === 200) {
-      // res为服务端返回值，可能有code，result等字段
-      // 这里对res.result进行返回，将会在this.$u.post(url).then(res => {})的then回调中的res的到
-      // 如果配置了originalData为true，请留意这里的返回值
-
      if (res.tokenObj.token) {
        storage.setStorageSync('anyringToken', res.tokenObj.token || '');
        storage.setStorageSync('refreshToken', res.tokenObj.refreshToken || '');
@ -49,16 +53,20 @@ export function setupHttp(app) {
      ui.showToast(res.msg);
      return false;
    } else if (res.code === 49) { // token过期
+      store.commit('setCount', store.state.count - 1);
+
      let refreshToken = storage.getStorageSync('refreshToken');
-      store.dispatch('user/getTokenByRefreshToken', refreshToken);
+      await store.dispatch('user/getTokenByRefreshToken', refreshToken);
+      
      return false;
    } else if (res.code === 401) { // refreshToken过期
      // 假设201为token失效，这里跳转登录
      // ui.showToast('验证失败，请重新登录');
      ui.showToast(res.msg);
-      // storage.setStorageSync('anyringToken', '');
-      // storage.setStorageSync('refreshToken', '');
-      // store.commit('user/setToken', ' ');
+
+      storage.setStorageSync('anyringToken', '');
+      storage.setStorageSync('refreshToken', '');
+      store.commit('user/setToken', ' ');

      setTimeout(() => {
        // 此为uView的方法，详见路由相关文档