微信小程序 跳转页面经常会遇到判断是否登录情况。基于此需求，做了一个路由跳转拦截的jump组件

小程序跳转页面的时候经常会遇到判断是否登录，未登录跳转登录页的需求。基于此需求，做了一个路由操作拦截跳转的jump组件

自定义组件

组件代码非常简单
在根目录创建components目录
在components目录新建jump目录
在jump目录新建四个文件
index.js
index.json
index.wxml
index.wxss

index.js内容

//引入不需要登录的path路径
//routerConfig.js的内容如下
/*
const noLoginPath = [
    '/pages/index/index',
    '/pages/article/list',
    '/pages/article/list'
]
module.exports = {
    noLoginPath: noLoginPath
}
*/
import {
    noLoginPath
} from '../../router/routerConfig.js';
Component({
    properties: {
        url: {
            type: String,
            value: ''
        },
        type: {
            type: String,
            value: 'navigateTo'
        },
        delta: {
            type: Number,
            value: 1
        }
    },

    /**
     * 组件的初始数据
     */
    data: {},
    methods: {
        route: function () {
            this.jump()
        },
        jump: function () {
            let token = wx.getStorageSync('token')
            let url = this.data.url
            let type = this.data.type
            //url是否跳转的tabbar页面，可以自行书写判断代码，如果是type = 'switchTab';否则就自行传递type的值为switchTab;
            //type类型有navigateTo（默认）、redirectTo、switchTab、reLaunch、navigateBack
            //delta参数只有后退才用得着，后台层数。
            var n_url_index = url.lastIndexOf("\?");
            var n_url = url.substring(0, n_url_index);
            //登录权限验证
            if (!noLoginPath.includes(n_url) && !token) {
                //跳转登陆页
                wx.navigateTo({
                    url: '/pages/user/login'
                })
                return
            }
            if (type == 'navigateTo') {
                wx.navigateTo({
                    url: url
                })
            } else if (type == 'redirectTo') {
                wx.redirectTo({
                    url: url
                })
            } else if (type == 'switchTab') {
                wx.switchTab({
                    url: url
                })
            } else if (type == 'reLaunch') {
                wx.reLaunch({
                    url: url
                })
            } else if (type == 'navigateBack') {
                wx.navigateBack({
                    delta: this.data.delta
                })
            }
        }
    }
})

index.json文件内容

{
    "component": true,
    "usingComponents": {
    }
}

index.html文件内容

<view catchtap="route" url="{{url}}" type="{{type}}" delta="{{delta}}"><slot /></view>

index.wxss文件内容

这个样式文件内容空就行

使用方法

<jump class="item" url="/pages/product/show">我要跳转了！</jump>
<jump class="item" url="/pages/index/index" type="switchTab">我要去tabbar页面</jump>