本篇文章主要讲述JavaScript之利用Vue独立编写博客园WebApp，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

说说使用的技术

· 开发工具：vs code

· 前端：vue，vue-cli3.0 vant(ui框架)，webpack，less

· 后端：博客园官方api

· 部署：nginx，云服务器

技术就是这么简单，前端采用脚手架构建而成。然后再使用vant的UI框架构建样式界面，webpack打包，less专注样式，后端就完全是博客园的api，拿来即用，不过接口要申请下权限。前后端的请求，采用的是“axios”,使用它的拦截器做了不少事。然后部署生成静态，用nginx部署在阿里云服务器上。    

技术想讲的就这些，vue是基础，由这些技术，就可以构建一个webapp。

1. token问题

博客园的接口采用的是OAuth2的形式，所以授权玩会附带一个token给我们，那遇到的token是啥问题呢，我们都知道token是时效性的，所以一般来说拿到就要保存下来，保存没问题，可以保存到cookie来，但是你再次访问，怎么知道token过期呢，还有进行重新获取呢。

为啥说这个是问题呢，因为以前都是jQuery的ajax，没有用过axios，不知道拦截器这种东西，我们使用拦截器，进行拦截"401"的转态码，因为它代表着未授权，拦截到后我们重新请求token，保存，并重新请求刚才的http。附上代码。

1. instance.interceptors.request.use( 
2. config => { 
3. let token = window.$cookies.get(_apiTokenKey) || ""; 
4. config.headers.Authorization = `Bearer ${token}`; 
5. return config; 
6. }, 
7. error => { 
8. return Promise.reject(error); 
9. } 
10. ); 
11. instance.interceptors.response.use( 
12. response => { 
13. return response.data; 
14. }, 
15. error => { 
16. let response = error.response; 
17. let config = error.config; 
18. if (response.status === 401) { 
19. getApiToken().then(res => { 
20. config.baseURL = ''; 
21. instance(config) 
22. }).catch(res=>{ 
23. window.$vm.$toast({ 
24. message: error.message 
25. }); 
26. }); 
27. }else{ 
28. window.$vm.$toast({ 
29. message: error.message 
30. }); 
31. } 
32. return Promise.reject(error); 
33. } 
34. );

2. 跨域问题 

对于博客园的接口地址，我们属于不同域的情况，可能你用POSTMAN来进行接口调试的情况，可以正常获取到数据，但实际在项目内我们却会遇到跨域问题。这也是很多作为前后端分离项目，优先考虑的问题。在这分为开发环境以及线上环境，线上环境会在下面讲到，我们先讲下开发环境底下的跨域问题。

因为开发环境是在Node.js底下，所以我采用的是webpack的跨域插件"http-proxy-middleware"来进行跨域的，因为vue-cli3.0，它集成在"vue.config.js"底下,配置如下： 

1. devServer: { 
2. host: "192.168.123.22", 
3. port: 8080, 
4. proxy: { 
5. "/credentials": { 
6. target: "https://api.cnblogs.com", 
7. changeOrigin: true, 
8. secure: true, 
9. pathRewrite: { 
10. "^/credentials": "" //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'//40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可 
11. } 
12. }, 
13. "/api": { 
14. target: "https://api.cnblogs.com/api", 
15. changeOrigin: true, 
16. secure: true, 
17. pathRewrite: { 
18. "^/api": "" //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'//40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可 
19. } 
20. }, 
21. "/oauth": { 
22. target: "https://oauth.cnblogs.com", 
23. changeOrigin: true, 
24. secure: false, 
25. pathRewrite:{ 
26. "^/oauth":"" 
27. } 
28. } 
29. } 
30. }

3. 登录问题

接下来就是登录问题，刚才我们讲过了博客园是采用OAuth2的授权，这边博客园还分为两种。不涉及用户操作的授权采用的是"授权码模式"，而有关用户操作的授权采用的是"密码模式",两者区分大家可以看这篇文章。那意味着我们在WebApp管理两个token。管理两个token不是问题，无非就是两个token，问题指的是我们获取用户操作的token是需要先用户进行登录操作，然后回调一个授权码的。我们来分析下。

接口问题

从上图的接口描述我们可以得知，我们要先或许授权码code，但是code是有回调地址redirect_uri参数传过来的，这边是默认博客园的地址的，安卓或者ios的开发，可以根据webView的监听来获取，但是Web这边就存在跨域的问题了，我尝试了很多方式，有iframe等等，但是最根本的问题，页面在人家手上，你碰不着，这也就是问题了，然后我就联系管理员，官方把回调地址改成我这边设置好的域名。 

但在这之前，如果改不成，那就换成引导式的方法来引导用户进行自己讲授权码复制回来，然后粘贴到我们设置到的授权页面，也就有下图的界面，所以即使回调地址不是咱们这边的，也可以进行登录授权。可以点击"获取授权码"来跳转页面，获取授权码，然后回到页面登录。

1. vue路由问题
一般来说，单页面开发使用的路由都是hash形式的路由，但是回调地址返回的参数是附带在#后面的，我们hash路由自带#，两者起冲突了，没办法，我们改成history形式的路由。

1. let routers = new Router({ 
2. mode: 'history', 
3. routes: config 
4. });

4. 图片防盗链
最后剩下一个问题，也就是图片防盗链，正常博客园的博问内容有些地址是image.cnblogs的地址，所以我们附在了我们自己的域名底下就会出现防盗链的结果，那如何处理防盗链呢，这边有2种做法，第一种是在head加上<meta name="referrer" content="no-referrer">来标识，第一种是使用vue的过滤器，然后用第三方代理去请求图片。这样子就可以了，不过代理的地址是cdn，所以可能找不到图片。

1. const imgConvert = url => { 
2. //没有在nginx做反向代理，直接用别人的反向代理访问, 
3. //该地址是cdn缓存图片存在，可能找不到图片 
4. if(url==undefined||url==null){ 
5. url=""; 
6. } 
7. url = url 
8. .replace("//", "") 
9. .replace("https://", "") 
10. .replace("https:", ""); 
11. return `https://images.weserv.nl/?url=${url}`; 
12. };

5. <img :src="item.Avatar | imgConvert" @error="errorFace" @click="gotoZone"> 

总结下吧
整体来说，整个项目挺好做的，思路也很清晰，唯一就是跨域问题比较有点，但最终也是解决了。

怎么去部署呢

在前面说到，我部署是使用云服务器+nginx，至于怎么安装nginx不懂可以私信我，或者百度嘛，我这边分享下我nginx的配置节点就可以了。当然如果还想要部署在外网环境，可以的话云服务器来一台，或者做个内网穿透，frp，ngrok之类的就可以，废话不多说，附上节点代码：

1. server{ 
2. listen 80; 
3. server_name cnblog.xuhuale.cn; 
4. root /ftpfiles/cnblog/dist; 
5. index index.html index.htm index.php; 
6.  
7. location / { 
8. try_files $uri $uri/ @router; 
9. index index.html; 
10. # error_page 405 =200 //$host$request_uri; 
11. } 
12. location @router{ 
13. rewrite ^.*$ /index.html last; 
14. }  
15. location /api { 
16. error_log logs/rewrite.log notice; 
17. # rewrite ^/api/(.*) /$1 break; 
18. proxy_pass https://api.cnblogs.com; 
19. }  
20. location /credentials { 
21. error_log logs/rewrite.log notice; 
22. rewrite ^/credentials/(.*) /$1 break; 
23. proxy_pass https://api.cnblogs.com; 
24. }  
25. location /oauth { 
26. error_log logs/rewrite.log notice; 
27. rewrite ^/oauth/(.*) /$1 break; 
28. proxy_pass https://oauth.cnblogs.com; 
29. } 
30.  
31. }

我们可以看到配置节点有"proxy_pass"这个就是nginx做的反向代理了，可以解决掉跨域问题。

本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！