会点 Vue.js ThinkPHP Workerman Swoole 的搬运工

0%

前言

平时想必都会遇到权限验证或者是路由重定向的需求,需要在构造方法做点处理

但实践中,必定会遇到同一个问题

我明明已经在构造方法做了判断,并且有return重定向response对象,它居然不重定向并且还执行了其它方法

解决

解决这个问题有以下方式

  • 使用中间件
  • 死扛构造方法

发现

  • 实践发现,在构造方法中抛出异常,是不会其它方法
  • 查看redirect源码,发现它是返回一个response对象
  • 翻查其它源码后发现HttpResponseException这个好东西

死扛构造方法

HttpResponseException 类,redirect 方法 两者搭配使用;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

use think\exception\HttpResponseException;

class Index
{
public function __construct()
{
if (不通过) {
// 接收response对象
$response = redirect('url');

// 抛出一个http异常
throw new HttpResponseException($response);
}
}
}

前端工作

配置axios

1
2
3
4
5
const service = axios.create({
// 其它代码...
// 允许发送cookie,axios默认关闭
withCredentials: true
})

后端工作

路由配置 或者 自动添加 header

Access-Control-Allow-Origin 不能为*,必须配置前端域名
Access-Control-Allow-Credentials 开启配置

以一条路由为例子。

1
2

Route::miss('test/index')->header('Access-Control-Allow-Origin', 'http://前端域名')->header('Access-Control-Allow-Credentials', 'true')->allowCrossDomain();

生成session

localhost:9522 前端域名与端口,80的不用填写

1
2
3
4
5
6
7
8
9

// 登录成功
session([
'prefix' => 'module',
'auto_start' => true,
'domain' => 'localhost:9522'
]);

session('user', $uid);

验证

1
2
3
4
5
6
7
8
9
10
11
12
13

// 验证
session([
'prefix' => 'module',
'auto_start' => true,
'domain' => 'localhost:9522'
]);

if (session('?user')) {
echo '已登录';
} else {
echo '未登录';
}

开启 JSX 编程

类似 React 的 Props 传参数、方法,实现父子组件通信与数据绑定

主要通过 Props 传递方法,从而节省 this.$emit()

缺点就是没法像 React 那样 this.props.xxx 直接赋值,Vue 的 props 必须要配置才能获取到参数

[Demo 链接]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
# App.vue

<script>
import Child from "./Child";
export default {
data() {
return {
msg: "default"
};
},
methods: {
handleChange(v) {
console.log(v.target.value);
this.msg = v.target.value;
}
},
render() {
return (
<div class="parent">
<p>父组件</p>
<p>{this.msg}</p>
<Child msg={this.msg} handleChange={this.handleChange} />
</div>
);
}
};
</script>

<style>
.parent {
border: 1px #000 solid;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Child.vue
<script>
export default {
props: ["msg", "handleChange"],
render() {
return (
<div class="child">
<p>子组件</p>
<p>msg: {this.msg}</p>
<input value={this.msg} onInput={this.handleChange} />
</div>
);
}
};
</script>
<style>
.child {
border: 1px #ccc solid;
}
</style>

组件以 Props 传递

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# App.vue
<script>
import HelloWorld from "./components/HelloWorld";
import Child from "./Child";
export default {
render() {
return (
<div class="parent">
<p>父组件</p>
<Child
component={HelloWorld}
/>
</div>
);
}
};
</script>

<style>
.parent {
border: 1px #000 solid;
}
</style>

使用h()渲染组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# Child.vue

<script>
export default {
props: ["component"],
render(h) {
return (
<div class="child">
<p>子组件</p>
<p>msg: {this.msg}</p>
<input value={this.msg} onInput={this.handleChange} />

<p>父组件传过来的组件</p>
{h(this.component)}
</div>
);
}
};
</script>
<style>
.child {
border: 1px #ccc solid;
}
</style>