1. 在 main.js 中封装全局登录函数

通过 vue 对象的原型扩展,可以扩展一个函数,这样这个函数就可以在
每一个界面通过类似指向对象的方式,去访问这个函数。

如下是 main.js 扩展的函数:

Vue.prototype.checkLogin = function(backpage, backtype){
    var SUID  = uni.getStorageSync('SUID');
    var SRAND = uni.getStorageSync('SRAND');
    var SNAME = uni.getStorageSync('SNAME');
    var SFACE = uni.getStorageSync('SFACE');
    if(SUID == '' || SRAND == '' || SFACE == ''){
        uni.redirectTo({url:'../login/login?backpage='+backpage+'&backtype='+backtype});
        return false;
    }
    return [SUID, SRAND, SNAME, SFACE];
}

uni.getStorageSync 采用同步的方式获取本地存储的四个变量。
分别是:

  • SUID:用户id
  • SRAND:用户随机码
  • SNAME:用户名称
  • SFACE:用户头像

如果四个变量为空值得话,就认为用户没有登录,则使用 uni.redirectTo 重定向的方式跳转到登录页,补充:uni.redirectTo 为 uni-app 中的两种跳转方式之一。

登录失败后返回 false,如果是已经登录了,则把需要获取的值返回回去;

参数说明

backpage, backtype 2个参数分别代表:

  • backpage : 登录后返回的页面
  • backtype : 打开页面的类型[1:redirectTo、2:switchTab]
返回值说明

已经登录返回数组 [用户 id, 用户随机码, 用户昵称, 用户表情]

2. 创建 login 页面

login 页面作为登录过度页面,多端登录都通过此页面完成!

<template>
    <view>
        {{backpage}}
        ---
        {{backtype}}
    </view>
</template> <script>
    export default {
        data() {
            return {
                backpage:'',
                backtype:''
            };
        },
        onLoad:function(e){
            this.backpage = e.backpage;
            this.backtype = e.backtype;
        }     }
</script> <style> </style>

3. 在页面中应用登录检查函数

我们通过界面触发校验登陆的函数,如 write.vue 界面。

点击上图中的 写作 将会触发验登陆的函数 checkLogin ,在这同时传递了两个参数,具体代码如下:

<script>
    export default {
    data() {
        return {         };
    },
    onLoad : function() {
        var loginRes = this.checkLogin('../my/my', '2');
        if(!loginRes){return false;}
    }
}
</script>

return 或终止函数运行哦!

执行结果如下:

很显然,跳转至 login.vue 登陆界面了。

main.js中封装全局登录函数的更多相关文章

  1. JavaScript -- 时光流逝(七):js中的全局函数

    JavaScript -- 知识点回顾篇(七):js中的全局函数 全局函数可用于所有内建的 JavaScript 对象. (1) encodeURI():把字符串编码为 URI. <script ...

  2. JS中的自执行函数

    本来规划的是2013年,狠狠的将JS学习下,谁知计划赶不上变化,计划泡汤了.13年的我对JS来说可以说是属于跟风,对它的理解和认识也仅仅是皮毛而已,也是因为要完成<ArcGIS API for ...

  3. 在vue项目中的main.js中直接使用element-ui中的Message 消息提示、MessageBox 弹框、Notification 通知

    需求来源:向后台请求数据时后台挂掉了,后台响应就出现错误,不做处理界面就卡住了,这时需要在main.js中使用axios的响应拦截器在出现相应错误是给出提示.项目使用element-ui,就调用里面的 ...

  4. main.js中import引入css与引入js的区别

    表现:引入css样式文件能够作用到全局,而引入js文件就只能在main.js中产生作用 在 main.js 中引入的 css 都是全局生效的.引入的 js 文件只在 main.js 中生效,是因为 m ...

  5. js中的三种函数写法

    js中的三种函数写法 <script type="text/javascript"> //普通的声明方式 function myFun(m,n){ alert(m+n) ...

  6. JS中构造函数和普通函数有什么区别

    JS中构造函数有普通函数有什么区别? 1.一般规则 构造函数都应该以 一个大写字母开头,eg: function Person(){...} 而非构造函数则应该以一个小写字母开头,eg: functi ...

  7. asp.net类似于js中的setTimeOut()的函数作用?

    asp.net类似于js中的setTimeOut()的函数作用? 插入这行即可,定时2秒,再运行下一步: System.Threading.Thread.Sleep(); 加个随机数 Random r ...

  8. JS中的高阶函数

    JS中的高阶函数 高阶函数是指以函数作为参数的函数,并且可以将函数作为结果返回的函数. 1. 高阶函数 接受一个或多个函数作为输入 输出一个函数 至少满足以上一个条件的函数 在js的内置对象中同样存在 ...

  9. vue在main.js中全局引用css的方法及坑

    步骤: 1.配置文件webpack.config.js: { test:/\.css$/, loader:'style-loader!css-loader' } 坑1:-loader尾缀 坑2:Mod ...

随机推荐

  1. java数据类型

    对String来说,”==“是用来判断两个字符串(对象)的地址是否相同,即判断是否是同一个字符串的应用.”equals()“则是判断两个字符串(对象)的值是否相等,如果相等则返回true.一般情况下, ...

  2. c#.net全站防止SQL注入类的代码

    using System;using System.Collections.Generic;using System.Linq;using System.Web; /// <summary> ...

  3. [分享]运维分享一一阿里云linux系统mysql密码修改脚本

    [分享]运维分享一一阿里云linux系统mysql密码修改脚本       大象吃豆子 级别: 小白 发帖 12 云币 27 加关注 写私信   只看楼主 更多操作楼主  发表于: 2014-09-3 ...

  4. css3动画响应式404页面

    PC端效果: 模拟触屏端效果: 兼容性:触屏端及桌面端(优雅降级至IE6) 模板下载: http://pan.baidu.com/s/1o67ftc2

  5. Data Base MySQL的常用命令

       MySQL的常用命令 一.下载地址: http://www.mysql.com 二.安装注意: root默认密码:123456 三.常用命令: 1.创建用户并授权: 创建用户,只能本地访问:cr ...

  6. javascript 函数学习

    1.自以为好的部分,更多访问: http://www.runoob.com/js/js-tutorial.html 2.this 3.new 4.闭包 5.自执行

  7. 1651: [Usaco2006 Feb]Stall Reservations 专用牛棚

    1651: [Usaco2006 Feb]Stall Reservations 专用牛棚 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 566  Sol ...

  8. 201521123002《Java程序设计》第14周学习总结

    本次作业参考文件 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. MySql数据库简单操作: 库操作: 显示所有数据库: show databases; 创建数 ...

  9. 用juniversalchardet解决爬虫乱码问题

    爬虫往往会遇到乱码问题.最简单的方法是根据http的响应信息来获取编码信息.但如果对方网站的响应信息不包含编码信息或编码信息错误,那么爬虫取下来的信息就很可能是乱码. 好的解决办法是直接根据页面内容来 ...

  10. MongoDB-3.4搭建副本集

    搭建副本集 1:首先创建3台虚拟机作为配置环境 IP1:192.168.101.175 IP2:192.168.101.176 IP3:192.168.101.177 2.下载MongoDB 3.4版 ...