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

灰太狼 2022-02-23 16:48 117阅读 0赞

### 一、准备 ###

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

1.  设置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_mall_html]  
[(后端)https://github.com/zyddj123/tp\_mall][https_github.com_zyddj123_tp_mall]

[https_github.com_zyddj123_mall_html]: https://github.com/zyddj123/mall_html
[https_github.com_zyddj123_tp_mall]: https://github.com/zyddj123/tp_mall