uni app开发_uniapp官网

uni app开发_uniapp官网用uni-app开发app应用登陆

大家好,又见面了,我是你们的朋友全栈君。

后端程序

我使用的是laravel框架作为app的接口,前后端分离就涉及到登陆这个问题了,uni-app不支持读写cookie,所以不能使用cookie来保存登陆状态.后端我使用的是基于OAuth的扩展包Passport扩展包,这里就不细写安装这个扩展包的过程了.详情可以参考学院君的文章.

uni-app发送登陆请求

默认的uni-app是一个使用 Vue.js.竟然这里登陆状态没有cookie了,那么我们咋么保存登陆状态呢,我们是通过vuex存储登陆状态的.

const store = new Vuex.Store({
    state: {
        /** * 是否需要强制登录 */
        forcedLogin: false,
        hasLogin: false,
        userInfo:{},
    },
    mutations: {
        login(state, provider) {
			state.hasLogin = true;
            state.userInfo.access_token = provider.access_token,  //access_token 是授权令牌,接下来访问后端的接口都带上token
            state.userInfo.token_type = provider.token_type,      //token_type 表示认证类型是 Bearer,
			                                                      //我们可以将这个 access_token 值设置到 Bearer Authentication 请求头去请求需要认证的后端 API 接口
			uni.setStorage({
				key:'userInfo',
				data:provider,
			})
        },
        logout(state) {
            state.hasLogin = false;
			state.userinfo={};
			uni.removeStorage({
				key:'userInfo'
			})
        }
    }
})

export default store
复制代码

登陆页面

 bindLogin() {
				
                /** * 客户端对账号信息进行一些必要的校验。 * 实际开发中,根据业务需要进行处理,这里仅做示例。 */
                if (this.account.length < 5) {
                    uni.showToast({
                        icon: 'none',
                        title: '账号最短为 5 个字符'
                    });
                    return;
                }
                if (this.password.length < 6) {
                    uni.showToast({
                        icon: 'none',
                        title: '密码最短为 6 个字符'
                    });
                    return;
                }
				
                /** * 下面简单模拟下服务端的处理 * 检测用户账号密码是否在已注册的用户列表中 * 实际开发中,使用 uni.request 将账号信息发送至服务端,客户端在回调函数中获取结果信息。 */
                const data = {
					grant_type:'password',
					client_id: 1,   
					client_secret: '数据库中client_secret',//同上
					username: this.account,
					password: this.password,
                };
// const validUser = service.getUsers().some(function (user) { 
    
// return data.account === user.account && data.password === user.password;
// });

                uni.request({
                	url:'http://guohang.test/oauth/token', //获取访问令牌
					data:
					{
						grant_type:'password',
						client_id: 1,   //安装passport,完成间授权注册,数据库生成的
						client_secret: '数据库中client_secret',//同上
						username: this.account,
						password: this.password,
					},
					method:'POST',
					header:{
						'Access-Control-Allow-Origin': '*',  //跨域加上头
						'Content-Type': 'application/json; charset=UTF-8'
					},
					
					success:(res)=> {     检验成功返回状态码,访问令牌等参数,使用vuex保存状态,后面请求服务器接口都要带上
						const info={      
							access_token:res.data.access_token,
							token_type:res.data.token_type,
						};
					
						if(res.statusCode==200){
							this.login(info);
									 uni.reLaunch({
									 url:'../main/main',
									 });
						}else{
							uni.showToast({
							    icon: 'none',
							    title: '用户账号或密码不正确',
							});
						}	
							
					}, 
                })
				

            },...mapMutations(['login']) , 
复制代码

认证的页面

因为页面有些是需要登陆之后才能进行操作的,所以我们应该有个拦截器来进行判断是否登陆,没有登陆就跳转登陆页面,

 import {
        mapState,
		mapMutations
    } from 'vuex'

    export default {
        computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
        onLoad() {
            if (!this.hasLogin) {
                uni.showModal({
                    title: '未登录',
                    content: '您未登录,需要登录后才能继续',
                    /** * 如果需要强制登录,不显示取消按钮 */
                    showCancel: !this.forcedLogin,
                    success: (res) => {
                        if (res.confirm) {
							/** * 如果需要强制登录,使用reLaunch方式 */
                            if (this.forcedLogin) {
                                uni.reLaunch({
                                    url: '../login/login'
                                });
                            } else {
                                uni.navigateTo({
                                    url: '../login/login'
                                });
                            }
                        }
                    }
                });
            }
        }
    }
复制代码

这只是一个很小的轮子,给你提供思路,最近自己在用这个做混合开发,所以做个并不是很细的笔记.

转载于:https://juejin.im/post/5c8915db6fb9a04a10302610

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/106934.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 【转载】ViewState的用法

    【转载】ViewState的用法

    2021年11月21日
  • sql 求交集_sql求差函数

    sql 求交集_sql求差函数start_num=5end_num=10(数据库值)startend(条件)四种情况://1、start=6end=8#{start}>=start_numand#{end}&lt;=end_num//2、start=4end=7#{effectiveDate}&lt;=effective_dateand(#{validDate}betweeneffective_dateandvalid_date)//3、

    2022年10月29日
  • python安装numpy后pycharm导入不了_pycharm中numpy安装

    python安装numpy后pycharm导入不了_pycharm中numpy安装    pycharm安装numpy失败,问题是解决办法:配置系统变量path新加然后在cmd命令行里添加之后pycharm里面就有了numpy

  • Web安全:概述_逆向和Web安全

    Web安全:概述_逆向和Web安全文章目录浏览器安全同源策略多进程结构沙箱恶意网址拦截跨站脚本攻击XSS定义示例分类浏览器安全同源策略浏览器的同源策略,限制了来自不同源的“document”或脚本对当前“document”的读取或修改。影响源的因素有:host、子域名、端口、协议等。多进程结构将浏览器的各个功能模块分开,各个浏览器实例分开,这样若一个进程崩溃,也不会影响到其他进程。GoogleChrome是第一个采取多进程架构的浏览器,其主要进程包括:浏览器进程、渲染进程、插件进程、扩展进程等。其中插件进程如flash、ja

  • mysql联合索引的使用规则

    mysql联合索引的使用规则从一道有趣的题目开始分析:假设某个表有一个联合索引(c1,c2,c3,c4)以下选项哪些字段使用了该索引:Awherec1=xandc2=xandc4>xandc3=xBwherec1=xandc2=xandc4=xorderbyc3Cwherec1=xandc4=xgroupbyc3,c2Dwherec1=?andc5

  • 用计算机算组合数_计算组合数

    用计算机算组合数_计算组合数计算组合数最大的困难在于数据的溢出,对于大于150的整数n求阶乘很容易超出double类型的范围,那么当C(n,m)中的n=200时,直接用组合公式计算基本就无望了。另外一个难点就是效率。对于第一个

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号