<p>一入冬懒癌发作，给自己找点事干。之前博客程序写过几次，php 的写过两次，nodejs 用 ThinkJS 写过，随着 ThinkJS 版本从1.x 升级到 2.x 之前的博客程序也做过升级。但是因为前面考虑搜索引擎抓取还是用传统的方式开发，没有做前后端分离。这次准备用 vue2.x 和 ThinkJS 3.X 重新写一次。这里主要记录一下开发过程中遇到的问题和解决方法。</p> <p>地址 <a href="https://github.com/lscho/ThinkJS-Vue.js-blog" rel="nofollow noreferrer"></a><a href="https://github.com/lscho/ThinkJS-Vue.js-blog" rel="nofollow noreferrer">https://github.com/lscho/Thin...</a></p> <p>尚未写完，持续更新中，后续更新发布在个人博客中：<a href="https://lscho.com/tech/vue-thinkjs.html" rel="nofollow noreferrer"></a><a href="https://lscho.com/tech/vue-thinkjs.html" rel="nofollow noreferrer">https://lscho.com/tech/vue-th...</a></p> <h2>设计方案</h2> <p>1.前后端分离<br>2.后端只提供接口<br>3.RESTful API<br>4.使用 jwt 身份认证</p> <h2>依赖</h2> <h4>服务端</h4>
"dependencies": {
"think-logger3": "^1.0.0",
"think-model": "^1.0.0",
"think-model-mysql": "^1.0.0",
"think-session": "^1.0.0",
"think-session-jwt": "^1.0.8",
"thinkjs": "^3.0.0"
}
<h4>前端</h4>
"dependencies": {
"axios": "^0.17.0",
"iview": "^2.5.1",
"mavon-editor": "^2.4.13",
"vue": "^2.5.2",
"vue-axios": "^2.0.2",
"vue-router": "^3.0.1",
"vuex": "^3.0.0",
"vuex-router-sync": "^5.0.0"
}
<h2>结构</h2> <p>|-<a href="https://github.com/lscho/ThinkJS-Vue.js-blog/tree/master/client" rel="nofollow noreferrer">client</a> 前端 <br>|-<a href="https://github.com/lscho/ThinkJS-Vue.js-blog/tree/master/server" rel="nofollow noreferrer">server</a> 后端</p> <h2>问题</h2> <h4>jwt 身份认证</h4> <p>jwt 的原理很清楚，之前自己也实现过类似的功能，搜索了一下，找到了 <a href="https://github.com/auth0/node-jsonwebtoken" rel="nofollow noreferrer">node-jsonwebtoken</a> 这个包，使用起来很简单，主要就是加密和解密两个功能。一番折腾之后成功运行，但是去 ThinkJS 仓库看了一下，竟然有发现了 <a href="https://github.com/thinkjs/think-session-jwt" rel="nofollow noreferrer">think-session-jwt</a> 这个插件，也是基于 node-jsonwebtoken 的。这个就更好用了，配置完之后直接用 ThinkJS 的 ctx.session 方法就可以生成和验证。配置的时候需要注意一下 tokenType 这个参数，他决定了如何获取 token ，我这里用的是 header ，也就是说后面会从每个请求的 header 中找 token，key 值为配置的 tokenName。</p> <p>然后要处理前端部分，为每个请求附加上 token。这里我用的是 axios ，在请求拦截器中很方便的就可以加上。</p>
let loadinginstace;
axios.interceptors.request.use(config => {
if (localStorage.getItem('token')) {
config.headers.Authorization = localStorage.getItem('token')
}
return config;
},error => {
return error;
})
<p>然后登录之后的每个请求中就可以看到</p>
<h4>后端权限认证</h4> <p>因为 API 接口遵循 RESTful 风格，所以对除了 GET 类型的请求，都要验证 token 是否有效，ThinkJS 的控制器提供了前置操作 <code>__before</code>。在这里可以做一下逻辑判断，通过的才会继续执行。</p>
async __before(action) {
try {
this.userInfo=await this.ctx.session('userInfo');
} catch(err) {
this.userInfo={};
}
if(this.resource!='token'&&this.ctx.method!='GET'&&think.isEmpty(this.userInfo)){
this.ctx.status=401;
return this.ctx.fail(-1,"请登录后操作");
}
}
<p>这里遇到一个问题，就是当 token 为错误时，node-jsonwebtoken 会抛出一个异常，所以这里用了 <code>try catch</code> 捕获，可能有更好的解决办法，暂时放后面处理。</p> <h4>前端身份失效检测</h4> <p>为了安全起见，我们的 token 一般设置的都有效期，所以有两种情况需要我们进行处理.</p> <ol><li>token 不存在，这种很好处理，直接在路由的前置操作中判断是否存在，存在则放行，不存在则转向登录界面</li></ol>
beforeEnter:(to, from, next)=>{
if(!localStorage.getItem('token')){
next({ path: '/login' });
}else{
next();
}
}
<p>2.token 超过有效期或者被篡改。这种需要后端检测之后才能知道该 token 是否有效。这里服务端检测失效之后会返回 401 状态码以便前端识别。</p>
if(this.resource!='token'&&this.ctx.method!='GET'&&think.isEmpty(this.userInfo)){
this.ctx.status=401;
return this.ctx.fail(-1,"请登录后操作");
}
<p>我们在axios的请求响应拦截器中进行判断即可，因为 4XX 的状态码会抛出异常，所以代码如下</p>
axios.interceptors.response.use(data => {
//这里可以对成功的请求进行各种处理
return data;
},error=>{
if (error.response) {
switch (error.response.status) {
case 401:
store.commit("clearToken");
router.replace("/login");
break;
}
}
return Promise.reject(error.response.data)
})
<h4>markdown 编辑器及文件上传</h4> <p>markdown 编辑器用了 <a href="https://github.com/hinesboy/mavonEditor" rel="nofollow noreferrer">mavonEditor</a> 配置很方便，不多说，主要说一下文件上传遇到的一个问题。<br>前端代码</p>
<mavon-editor ref=md @imgAdd="imgAdd" class="editor" v-model="formItem.content"></mavon-editor>
imgAdd(pos, $file){
var formdata = new FormData();
formdata.append('image', $file);
image.upload(formdata).then(res=>{
if(res.errno==0&&res.data.url){
this.$refs.md.$img2Url(pos, res.data.url);
}
});
}
<p>后端处理</p>
const file = this.file('image');
const extname=path.extname(file.name);//path.extname获取文件后缀名，可做控制
const filename = path.basename(file.path);
const basename=think.md5(filename)+extname;
const savepath = '/upload/'+basename;
const filepath = path.join(think.ROOT_PATH, "www"+savepath);
think.mkdir(path.dirname(filepath));
try{
//跨盘符移动会抛出异常
await rename(file.path, filepath);
}catch(e){
const readStream = fs.createReadStream(file.path);
const writeStream = fs.createWriteStream(filepath);
readStream.pipe(writeStream);
}
<p>这里也用了一个 <code>try catch</code> 来捕获异常，主要是因为 ThinkJS 会将上传的文件先放到临时目录中，而在 windows 下临时目录可能和项目目录不在同一盘符下，进行移动的话就会抛出一个异常：<code>Error: EXDEV, cross-device link not permitted</code>，没有权限移动，这时候就只能先读文件，再写文件</p> <blockquote> <p>2017-12-27 更新 在群里@阿特 大佬提到，可以对 <a href="https://github.com/thinkjs/think-payload" rel="nofollow noreferrer">payload</a><br>这个中间件设置指定临时目录为项目下的某个目录，这样就不存在跨盘</p>
{
handle: 'payload',
options: {
uploadDir: path.join(think.ROOT_PATH, 'runtime/data')
}
}
<p>这样就可以直接使用 rename 来操作了，关于跨盘 rename 的问题，在 <a href="https://github.com/nodejs/node-v0.x-archive/issues/2703" rel="nofollow noreferrer"></a><a href="https://github.com/nodejs/node-v0.x-archive/issues/2703" rel="nofollow noreferrer">https://github.com/nodejs/nod...</a> 找到了原因，大意是操作系统限制 rename 仅仅是重命名路径引用地址，并没有将数据移动过去，重命名不能跨文件系统操作，所以如果跨文件系统操作需要先复制、然后删除旧数据</p> </blockquote> <h4>部署</h4> <p>因为前端路由使用 history 模式，所以要将请求转发至 index.html 入口页面处理，跟有些 mvc 框架单入口是一个概念。</p> ``` # 请求转发至入口 location / { try_files $uri $uri/ /index.html; } ```
<p>然后还要处理一下后端请求部分，如果不是同一域名，就要解决跨域问题。这里前后端使用同一个域名，针对 api 请求做一下反向代理即可。</p> ``` set $node_port 8360; location ~ ^/api/ { proxy_http_version 1.1; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_set_header X-NginX-Proxy true; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_pass http://127.0.0.1:$node_port$request_uri; proxy_redirect off; } ```
<p>后端使用 pm2 守护进程即可。</p>
原文地址：https://segmentfault.com/a/1190000012610084
来源：oschina
链接：https://my.oschina.net/u/4299463/blog/3751943