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)


相关推荐

  • 西班牙c2语言是什么标准,西班牙语的等级是怎么划分的?

    西班牙c2语言是什么标准,西班牙语的等级是怎么划分的?西班牙语根据欧洲共同语言参考标准分为:A1,A2,B1,B2,C1,C2六个级别。A1,A2为基础入门级别,B1,B2为高级进阶级别,C1,C2为流利进阶级别。《欧洲语言学习统一标准》(Cadreeuropéencommunderéférencepourleslangues),简称”欧标”。是欧洲议会在2001年11月通过的一套建议标准,为欧洲语言在评量架构和教学指…

  • shell语法简单介绍

    shell语法简单介绍

    2021年12月10日
  • pycharm 安装包总失败原因及解决办法「建议收藏」

    pycharm 安装包总失败原因及解决办法「建议收藏」对于pycharm安装包失败的原因借解决办法在pycharm中安装包安装失败:Non-zeroexitcode(1)可能是在库中找不到对应版本。解决:cmd中使用命令:pipinstall包名-ihttps://pypi.douban.com/simple另一种总是安装失败,也有可能是pip版本过低。更新pip,在pycharm->setting->ProjectInterpreter进行升级。如果pip总是更新失败,可以重装anaconda。(我是用anaconda解

  • 定积分的应用之 柱壳法求旋转体体积

    定积分的应用之 柱壳法求旋转体体积

  • requestparam注解接的收的是什么格式(玄机赋注解)

    1、作用:@RequestParam:将请求参数绑定到你控制器的方法参数上(是springmvc中接收普通参数的注解)2、语法:语法:@RequestParam(value=”参数名”,required=”true/false”,defaultValue=””)value:参数名required:是否包含该参数,默认为true,表示该请求路径中必须包含该参数,如果不包含…

  • choropleth map_Mapsource

    choropleth map_Mapsource简介MapStruct是满足JSR269规范的一个Java注解处理器,用于为JavaBean生成类型安全且高性能的映射。它基于编译阶段生成get/set代码,此实现过程中没有反射,不会造成额外的性能损失。您所要做的就是定义一个mapper接口(@Mapper),该接口用于声明所有必须的映射方法。在编译期间MapStruct会为该接口自动生成实现类。该实现类使用简单的Java方法调用来映射source-target对象,在此过程中没有反射或类似的行为发生。性能优点与手工编..

    2022年10月26日

发表回复

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

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