彻底前后端分离、解决跨域等问题demo

一、准备

两台服务器：

一台前端html服务器 http://admin.tp_mall.com

一台后端获取数据及redis数据库服务器 http://api.tp_mall.com

后端php框架：thinkphp5.1

jsonp

二、流程及原理

用户登录页 http://admin.tp_mall.com/login/login.html

ajax表单提交登录

登录成功将id、uname、usalt、loginTime通过aes对称加密生成token

将token写入redis数据库（设置过期时间）

ajax返回token及用户名和头像（便于显示）、并且写入cookie

跳转首页并发送携带token的ajax请求数据

新建一个tp框架中间件AdminLoginCheck.php 拦截http请求来判断是否登录

token有效且未过期表示已登录，通过中间件到达控制器返回数据给页面

刷新redis中的loginTime维持登录状态

token无效或已过期标识未登录，返回状态并重定向到登录页

三、主要代码

AdminLoginCheck中间件主要代码

public function handle($request, \Closure $next)

{

$jsonp = $request->param('callback');

$token = $request->param('token');

$aes = new Aes('zyddj123');

$tokenValue = $aes->decrypt($token);

$tokenArr = explode(' ', $tokenValue);

$key = 'adminToken_'.$tokenArr[0];

$redis = new Redis();

$redisToken = $redis->get($key);

$redisTokenValue = $aes->decrypt($redisToken);

$redisTokenArr = explode(' ', $redisTokenValue);

if ($redisTokenArr[0] == $tokenArr[0] && $redisTokenArr[1] == $tokenArr[1] && $redisTokenArr[2] == $tokenArr[2] && intval($redisTokenArr[count($redisTokenArr) - 1]) + 7200 > time()) {

//已经登录 刷新redis中token过期时间

$redisTokenArr[count($redisTokenArr) - 1] = time();

$newToken = $aes->encrypt(implode(' ', $redisTokenArr));

if (!$redis->set($key, $newToken, 7200)) {

$ret = [

'sta' => -2,

'mes' => '写入redis中token过期时间失败!',

];

echo $jsonp.'('.json_encode($ret).')';

die;

}

} else {

//未登录 终止程序

$ret = [

'sta' => -1,

'mes' => '请重新登录!',

];

echo $jsonp.'('.json_encode($ret).')';

die;

}

return $next($request);

}

设置redis过期时间

/**

* 设置用户token的redis过期时间

*

* @param [type] $info 用户身份信息

* @return $token or false

*/

public static function setRedisExpire($info)

{

$aes = new Aes('zyddj123');

$redis = new Redis();

$tokenValue = [

'id'=>$info['id'],

'uname'=>$info['uname'],

'usalt'=>$info['usalt'],

'loginTime'=>time()

];

$token = $aes->encrypt(implode(" ",$tokenValue));

$key = 'adminToken_'.$info['id'];

return $redis->set($key,$token,7200)?$token:false;

}

四、详细

详细请移步至我的github

(前端)https://github.com/zyddj123/mall_html

(后端)https://github.com/zyddj123/tp_mall