uniapp H5项目跳转拦截

1.pages根目录新建plugins文件夹，新建init文件存放下面的代码段。

​

// config 文件是白名单，不需要登录的页面。

import config from "./config.js"
export default function initApp() {
/*
  页面跳转拦截器
*/
let list = ["navigateTo", "redirectTo", "reLaunch", "switchTab"];
list.forEach(item => { 

//遍历的方式,navigateTo,redirectTo,reLaunch,switchTab这4个路由方法添加拦截器

        uni.addInterceptor(item, {
            invoke(e) {
                // 调用前拦截
                /* 获取用户的token，自己在登录接口中保存的。 */

                // const token = uni.getStorageSync('userToken')

                // 获取要跳转的页面路径（url去掉"?"和"?"后的参数）
                url = e.url.split('?')[0];
                let notNeed = config.whiteList.includes(url)

                // 如果在whiteList里面就不需要登录
                if (notNeed) {
                    return e
                }else {
                    /* 需要登录，跳到白名单的登录页。 */
                    if (token == '') {
                        uni.navigateTo({
                            url: config.loginPage
                        })
                        return false
                    } else {
                        return e
                    }
                }

            },
            fail(err) { // 失败回调拦截 
                console.log(err);
                if (Debug) {
                    uni.showModal({
                        content: JSON.stringify(err),
                        showCancel: false
                    });
                }
            }
        })
    })
}

​

2.config白名单文件的代码。

export default {
    //不需要登录的页面,白名单
    whiteList: [
        "/pages/login/login",
        "/pages/register/register",
        "/pages/index/index"
    ],
}

3.在App.vue入口文件中引入，并在onLaunch生命周期中引入。

import initApp from "./plugins/init";
export default {
  onLaunch: function (options) {
    // 跳转拦截,我这里跳去主页不用登录
    initApp();
    if(options.path != "pages/index/index"){
      this.checkTokenStatus();
    }
  },
};

methods: {
      //检查token状态，若过期则重新登录
      checkTokenStatus() {
      let token = uni.getStorageSync("userToken");
      if (!token) {
        uni.navigateTo({
          url: "/pages/login/login",
       });
      }
   },
},