thinkphp5.1和php、vue.js实现前后端分离和交互

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>//vue.js的使用
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>//axios的使用

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>//饿了吗ui js和css的调用。

<script>//返回信息到前端
	
	const app = new Vue({
	el: '#app',//对应使用id="app"获取信息。
	data() {
	return {
	admin: "",
	password: "",
	dd:"",//定义是三个变量初始化都为空可在id="app"的页面编写{{admin}}返回admin的值
	}
	},
	methods: {//参数的传递
	login: function () {
	var $this = this;
	console.log("登录触发");//打印返回
	axios({
	method: 'post',
	url: 'http://127.0.0.1/xiangbb/tp5/public/user',
	data: {
	admin: this.admin,
	password: this.password
	}
	})//使用axios根据地址把data的数组值根据post进行传输，this.admin和this.password是定义<input v-model="admin">获取
	.then(function (response) {//成功400或401 执行。
	//$this.dd = response.data;//获取后台数据
	//console.log(response.data.access_token);
	localStorage.setItem('token', response.data.access_token);//本地存储token值
	window.location.href="../index/index.html";//跳转页面
	})
	.catch(function (error) {
	$this.$message.error('账号或密码错误！');//失败，出现错误，返回弹窗
	console.log(error);

	});

	}
	},
	mounted() {//在模板渲染成html后调用,这里未使用，配套的created在模板渲染成html前调用
	
	}
	})
	</script>

'default_return_type' => 'json',

<?php
namespace app\index\controller;//表示放置位置
use think\Controller;//控制器基类
use \Firebase\JWT\JWT;//调用库 jwt 类
use think\Request;//请求对象类
use app\common\model\User as Muser;//模型
class User extends Controller
{
 public function user()
 {
 
 //echo $_COOKIE["user"];//前端传参到这里
 $admin=input('post.admin');
 $password=input('post.password');//获取前端
 $user=db('user')->where('admin',$admin)->where('password',$password)->find();//删选
 //\dump($user);
 if($user)//使用jwt方法
 {
 $key = \config("app.jwt_key");//key值，唯一保密,在config的app下的jwt_key
 $token = array(
 "iss" => "http://127.0.0.1/xiangbb/tp5/public/user",// 签发地址
 "aud" => "http://127.0.0.1/xiangbb/qian/login/login.html#",//面向对象地址
 "iat" => time(),//创建时间
 "nbf" => time(),//生效时间
 'exp' => time() + 3600, //过期时间-10min
 'sub' => $user['id'],//传递的id值
 );
 
 $jwt = JWT::encode($token, $key);//加密
 //$decoded = JWT::decode($jwt, $key, array('HS256'));//解密
 return [
 "access_token" => $jwt,//加密数据
 "token_type" => "Bearer",//类别
 "expires_in" => 3600,// 过期时间
 ];//返回数组

 }
 return response()->code(401);//如找不到 返回401指令
 
 }
}

	<script>
	const app = new Vue({
	el: '#app',
	data() {
	return {
	
	token: "",
	http: {},
	}
	
	
	},
	methods: {
	},
	created() {
	
	this.token = localStorage.getItem('token');//在登录页面验证成功而保存的token值，进行获取
	this.http = axios.create({//整理token的值
	
	baseURL: 'http://127.0.0.1/xiangbb/tp5/public/',
	timeout: 5000,
	headers: {'Authorization': "Bearer "+this.token}
	});
	if(!this.token)//若this.token不存在时返回登录页面
	{
	window.location.href="../login/login.html";
	}
	else
	{
	this.http.get('/user')//调用上面的http，把值传回后台
	.then(function (response) {
	console.log(response);
	})
	.catch(function (error) {//token错误返回登录页面
	window.location.href="../login/login.html";
	console.log(error);
	});
	}
	}
	})
	</script>

Route::rule('user','index/user/show','GET')->middleware('verify_user');//路由接收，跳转中间件判断

<?php

namespace app\http\middleware;//文件位置
use think\Request;//请求
use \Firebase\JWT\JWT;//jwt
use app\common\model\User;//模型
class VerifyUser
{
 public function handle(Request $request, \Closure $next)//使用模型
 {
 $Authorization = $request->header('Authorization');//获取前端传递的值
 if(!isset($Authorization)) return response()->code(401);//检测变量是否存在，不存在返回401
 $key =\config("app.jwt_key");//key值 定义在config下的app的jwt_key
 $token_type = \explode(" ",$Authorization)[0];//根据空格隔开获取第零个字符串
 $token = \explode(" ",$Authorization)[1];//根据空格隔开获取第一个字符串
 
 if($token_type == 'Bearer')//判断$token_type是否正确
 {
 
 try {
 $decoded = JWT::decode($token, $key, array('HS256'));//解密
 $request->user = $user = User::get($decoded->sub);//获取解密后的用户id
 if(!$user||$decoded->exp<time())//如果id不存在或者时间超出，返回401
 return response()->code(401);
 }catch(\Exception $e) { //捕获异常，返回401，可能解密失败，$e可返回失败原因
 return response()->code(401);
 }
 }
 else {//$token_type错误也返回401
 return response()->code(401);
 }
 return $next($request);//当没有执行401时，执行到下一个请求，可能有多个中间件或者路由。
 }
 
}

 public function show(Request $request)//请求，依赖注入
 {
 $user = Muser::get($request->user['id']);// 模型，获取数据库id相同的表数据，默认表名为Muser的原名 User
 return $user;//返回对应数据
 }