用uni-app开发app应用登陆

旧城等待， 2023-06-14 04:10 7阅读 0赞

# 后端程序 #

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

## uni-app发送登陆请求 ##

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

## 登陆页面 ##

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'
                                    });
                                }
                            }
                        }
                    });
                }
            }
        }
    复制代码

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

[Link 1]: https://laravelacademy.org/post/9745.html