微信小程序是否有路由拦截_小程序登陆拦截器(类似vue路由守卫)，登陆弹窗，切换密码是否可见！...

点击：需要用户登陆才能进去页面，否则弹出登陆框

利用原理：用户登陆后缓存的标识，和全局方法，引入全局组件！登陆样式.login_mask {    background: rgba(0, 0, 0, 0.4);    width: 100%;    height: 100%;    position: fixed;    top: 0;    left: 0;    z-index: 1996;    display: flex;    align-items: center;}.login_main {    width: 652rpx;    height: 800rpx;    background: #f8f8f9;    margin: 0 auto;    /* margin-top: 100rpx; */    border-radius: 10rpx;    position: relative;    text-align: center;}.login_main .icon-guanbi {    position: absolute;    right: 40rpx;    top: 40rpx;    z-index: 88;    font-size: 40rpx;}.login_main .logo {    width: 60rpx;    height: 60rpx;    border-radius: 50%;    margin: 42rpx 0;}.login_main .title {    font-size: 28rpx;    color: #00274b;}.login_main .email {    width: 544rpx;    height: 88rpx;    border: 1px solid #bbc9d6;    margin: 0 auto;    border-radius: 44rpx;    text-align: left;    padding-left: 32rpx;    margin-top: 40rpx;}.login_main .password {    width: 544rpx;    height: 88rpx;    border: 1px solid #bbc9d6;    margin: 0 auto;    border-radius: 44rpx;    text-align: left;    padding-left: 32rpx;    margin-top: 40rpx;}.login_main .eye {    position: absolute;    width:100rpx;    height: 88rpx;    right: 50rpx;    top: 17rpx;    z-index: 150;}.forget {    height: 80rpx;    line-height: 80rpx;    color: #03a9f4;    font-size: 24rpx;}.termsOfService {    font-size: 24rpx;    color: #97a7b7;    margin-top: 48rpx;}.noAccount {    font-size: 24rpx;    color: #97a7b7;    margin-top: 38rpx;}.service,.register{    color:#03a9f4;}.submit {    width: 544rpx;    height: 88rpx;    line-height: 88rpx;    border-radius: 44rpx;    /* background: #93d6f8; */    background:#03a9f4;     color: #fff;    font-size: 34rpx;}

!--登陆模态框--template name="login"    view class="login_mask" wx:if="{{logShow}}"        view class="login_main"            icon class="iconfont icon-guanbi close" bindtap='close'/icon            image class="logo" src='../../images/icon-small.png'/image            view class="title"去{{'Laicode'}}做题,先绑定Laicode账号/view            view style="position:relative;"                label                    input  class="email" type="text" placeholder='Email' bindinput='getEmail' placeholder-style="color:#bbc9d6;font-size:28rpx;"                    /input                /label            /view            view style="position:relative;"                label                    input  name="password" class="password" placeholder="Password" password="{{showpass}}" value="{{password}}" bindinput='getPassWord' placeholder-style="color:#bbc9d6;font-size:28rpx;"                    /input                /label                icon bindtap='switchEye' class="iconfont eye {{eye?'icon-close-eye':'icon-ai-eye'}}"/icon                !-- icon wx:if="{{!eye}}" class="iconfont ."/icon --            /view            view class="forget"忘记密码/view            button class="submit"绑定/button            view class="termsOfService"使用laicode账号 则同意我们                text class="service"服务条款/text            /view            view class="noAccount"没有laicode账号？                text class="register"立即注册/text            /view        /view    /view/template

在需要用到的页面引入!-- 引入登陆模态框 --import src="../login/login.wxml" /template is="login" data="{{showpass,eye,password,email,focus,logShow}}"/templateview bindtap='islogin'点击打卡/view

jsvar util = require('../../utils/util.js'),   Page({              data: {            logShow: false        },//切换密码是否可见        switchEye() {            var that = this;            util.switchEye(that, that.data.eye, that.data.showpass)        },//获取密码        getPassWord: function(e) {            var that = this;            var password = e.detail.value;            util.getPassWord(that, password)        },//获取邮箱        getEmail(e) {            var that = this;            var email = e.detail.value;            util.getEmail(that, email)        },//关闭模态框        close() {            var that = this;            util.close(that)        },        islogin() {                     if (用户登陆的标识，可以在登陆后存到缓存里面，然后在缓存取) {                this.setData({                    logShow: true                })            } else {                           wx.navigateTo({                   url: '跳转的页面',               })            }        },        onLoad: function(options) {                 },          }  )

全局utils//切换密码可见性function switchEye(that, eye, showpass) {    var showpass = !that.data.showpass;    var eye = !that.data.eye;        that.setData({                  showpass: showpass,            eye:eye        })}//获取输入的邮箱function getEmail(that, email) {    that.setData({        email: email    })}//获取输入的密码function getPassWord(that, password) {    console.log(password)    that.setData({        password: password    })}function close(that){    that.setData({        logShow: false    })}// 把方法暴露出来供别的页面使用module.exports = {    switchEye: switchEye,    getPassWord: getPassWord,    getEmail: getEmail,    close: close,}

代码中引用了阿里矢量图标库 使用请注意