uni-app实现登录保存Token

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

引言

在上一小节中我向大家展示了如何在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