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

一、准备

1. 两台服务器：

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

2. 后端php框架：thinkphp5.1

3. jsonp

二、流程及原理

1. 用户登录页 http://admin.tp_mall.com/login/login.html
2. ajax表单提交登录
3. 登录成功将id、uname、usalt、loginTime通过aes对称加密生成token
4. 将token写入redis数据库（设置过期时间）
5. ajax返回token及用户名和头像（便于显示）、并且写入cookie
6. 跳转首页并发送携带token的ajax请求数据
7. 新建一个tp框架中间件AdminLoginCheck.php 拦截http请求来判断是否登录
8. token有效且未过期表示已登录，通过中间件到达控制器返回数据给页面
9. 刷新redis中的loginTime维持登录状态
10. token无效或已过期标识未登录，返回状态并重定向到登录页

三、主要代码

1. 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);
	}

2. 设置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