混合app

uni-app实现登录保存Token

本教程为《用WordPress与uni-app开发,包含所有源代码》系列教程之一。

全功能WordPress API接口工具已出

全功能WordPress API接口工具已出只为前端开发者的你设计,详情查看:Sliver Rest Wp api:全功能的WordPress api工具

引言

在上一小节中我向大家展示了如何在uni中判断用户是否登录,在本小节中我将利用前面的登录代码实现token的存储。

开始

后端

打开我们的主题目录下面的login.php文件:

将代码替换如下:

<?php
//引入WP加载文件,引入之后就可以使用WP的所有函数 
require( '../../../../wp-load.php' );
//允许跨域
header('Access-Control-Allow-Origin:*'); 
header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); 
header('Access-Control-Allow-Credentials: true'); 
header('Access-Control-Allow-Headers: Content-Type,Content-Length,Accept-Encoding,X-Requested-with, Origin');
//引入生成Token工具类 https://www.clearnull.com/951.html
use SliverApiToken;

//定义返回数组,默认先为空
$data=[];

//1、接收post参数。
$user_name = $_POST["usaer_name"];
$user_pwd = $_POST["uuser_pwd"];
if($user_name==''||$user_pwd==''){
	$data['code'] = 404;
	$data['msg'] = '请认真填写表单!';
	echo json_encode($data);
	die();
}
// 2、收集登录数据
$login_data['user_login'] = $user_name;
$login_data['user_password'] = $user_pwd;

//使用wp函数校验用户名、密码
$user_verify = wp_signon( $login_data, false ); 
if (is_wp_error($user_verify) ) {   
	$data["code"] = 404;
	$data["msg"] = "用户名或者密码错误!";
	echo json_encode($data);
	die();
}
$user          =get_user_by('login',$user_name);
$user_id       =$user->ID;                          
$pwd           = $user_verify->data->user_pass;
//返回数据
$data['code']  = 200;  
$data['msg']   = '登录成功!欢迎回来!';
$data['user_info']['user_id']        =$user_id;
$data['user_info']['user_name']      =$user_verify->data->display_name;
$data['user_info']['user_email']     =$user_verify->data->user_email;
$data['user_info']['user_registered']=$user_verify->data->user_registered;

$data['token'] = Token::setToken($user_id, $pwd);//调用Token类中的生成Token方法

// 输出json数据格式
print_r(json_encode($data));
?>

可以看出,我这里主要是对代码做了优化和加入了Token机制,因为注释清楚这里就不一步步讲了。

前端

现在后端已经完成了Token的生成与输出,我们前端则只需要在正确的登录的方法中将Token存储一下即可。

打开 login.vue文件

原始登录方法:

修改为如下:

formSubmit: function(e) {
			//获取表单值
			var formData = e.detail.value;
			// 请求
			uni.request({
				//api地址
				url: 'http://appblog.inacorner.top/wp-content/themes/wpApp/api/login.php',
				data: {
					//请求值
				     'usaer_name': formData.username,
					  'uuser_pwd':formData.userpwd
				},
				//请求类型
				method:'POST',
				//请求头
				header: {
					'content-type': 'application/x-www-form-urlencoded',
				},
				success: (res) => {
					console.log(res.data)
					if(res.data.code == 200){
						//登录成功之后获取Token
						uni.setStorage({
							key:'token',
							data:res.data.token,
							success() {
								//存储完Token之后再存储一下用户信息
								uni.setStorage({
									key:'user',
									data:res.data.user_info,
									success() {
										//返回上一页
										uni.navigateBack();
									}
								})
							}
						})
					}else{
						console.log(res)
					}
				}
			});
		}

可以看出这里主要是修改了登录成功之后的回调,首先我们先存储一下Token,Token存储完成之后我们有存储了下后端返回的数据。

现在在浏览器中运行APP,登录之后你会在谷歌的控制台中发现你存储的数据:

代码仓库: https://github.com/sliverRing/uniApp-WPApp

QQ交流群: 824144151

此为本站官方星球,加入此星球可以获得以下专属权利:

  1. 得到官方任何WordPress方面的问题解答(包括WordPress建站疑问、WordPress使用问题、WordPress主题或插件bug)
  2. 可以随意下载以及更新官方发布的插件、主题(如有特别说明除外)
  3. 可以得到官方人员的免费技术援助(包括但不仅限于:WordPress、UNI、IONIC、React Native 、flutter、建站)
  4. 可以查看所有官方插件、主题的使用文档
  5. 可以得到官方插件、模板的免费技术援助
  6. 免费查看官网推出的所有教程并得到技术援助
  7. 免费得到WordPress建站建议、优化建议(大数据,大存储,高并发)
  8. 更多权利待添加……

评论已经被关闭。

插入图片

WordPressApp来了

快速让你的网站变成一个APP,不需要任何技术,点此查看