判断是什么类型的用户再登录_消失了半个月我都学到了什么前端知识

自从发布了上一篇文章后，沉寂了半个月，我又来发（水）文章了，本篇文章也算是对半个多月以来接触的知识进行整理。

1. vue-router

1.1 动态路由

动态路由是鉴权的一部分，一般需要登录的界面都会有一个权限校验的功能，根据登录用户的权限不同，来动态控制应该展示哪些界面，而这些动态路由的数据一般是由后端判断当前登录用户的权限，然后根据权限将路由的数据发送回来。

1.2 路由守卫

判断用户是否进行登录，就需要使用路由守卫，如果没有登录则跳转到登陆页面，如果有登陆就可以进行正常的访问页面，如果登录失效也跳转到登陆页面。

可以和动态路由进行配合使用。

2. TypeScript

虽然TypeScript+Eslint对于代码有非常多的限制，但是我十分喜欢这种按照规矩写代码的感觉，我的IDE上面甚至还有一个代码规范检测插件SonarLint。

按照规范写代码，不仅可以让你的代码看起来更漂亮，团队代码风格统一，更重要的是按照规范写代码可以减少隐藏的BUG，俗话说得好：随意发挥一时爽，重构代码火葬场。

Eslint限制你无法在TypeScript使用any类型，很多刚从JavaScript转到TypeScript就喜欢满篇any，那这样用TypeScript的意义就不在了，所以我也没有取消无法使用any的限制，虽然这个限制在某些时候蛮讨厌的，尤其是在引入了第三方包的时候，你还真就不知道引入的变量是什么类型，而又不让你定义any的那种绝望感。

TypeScript最大的好处就是类型定义，在接手JavaScript构建的项目代码时，可能后端传递而来的响应数据并没有进行定义，就使用了一个空对象接收后端发来的数据，然后就开始在页面上面进行调用，更过分的是没有注释！

这个时候你完全不知道后端传来的数据里面有些什么东西，这些东西的含义又是什么，或许你可能说会有接口文档，去看一下就好了，但是如果是一个随心所欲的后端，接口文档写的不明白呢？甚至没有接口文档呢？这个时候维护该项目的代码是一件非常困难的事情，你完全不知道该值是从何而来，又是在什么地方进行修改的。

3. Vue3

因为公司需要开发一个新项目，该项目并非是一个庞大的牵扯很多东西的项目，所以我直接用上了Vue3 + TypeScript + Antdv，大概到目前为止做了一个多星期了，整体体验下来Vue3相比Vue2来讲，确实是好用太多了。

Vue3拥有全新的Composition API，在组件的编写上是异常的顺滑，而且在这之前，我已经使用了一个多月的TypeScript，所以对TypeScript还算是比较熟悉，而这次TypeScript+Vue3的编写，第一感觉就是编写体验流畅太多了，不用再将组件中的代码全部写在export default中，你可以写在一个ts文件中，再到组件中直接引入进行使用。

同时Vue3可以将数据处理放在一个函数中，不会出现Vue2在data中定义的数据，在组件中的计算属性、方法等其它各个地方进行调用，接手别人的代码时你完全不知道在页面的哪些地方修改了该值，或者在哪些地方对该变量进行了赋值。使用了Vue3后，就可以把同一逻辑写在一个函数中。

但是对于代码风格非常差劲的人来说，使用Vue3可能会写出一些让人非常难以理解的代码，一旦写代码者嫌麻烦不将同一功能的代码统一放进一个函数中进行管理而全部堆在setup()中，谁接手他的代码谁就分分钟开骂。

总之经过一周多使用Vue3后我觉得是非常好用，Vue3也可能会很快的在各大公司的生产环境中正式开始启用，因为现在Vue3的正式版本已经发行了1个多月，也是时候该学习Vue3了。

4. Jenkins

自动构建与持续交付，你是否因为每次打包然后部署到服务器而烦恼，大点的公司一般都有运维帮你进行部署，而小公司一般都要自己进行部署。

如果是一个项目仅仅只部署到一个服务器，那么手动部署还能接受，如果项目过多，可能会出现部署错项目位置的情况。

还有如果一个项目要部署到好几个服务器呢？光是部署都要花费不少时间，让我们想想正常的部署流程：

1. 打上tag。
2. 通过Git提交到代码管理仓库。
3. 通过npm run build进行打包。（如果有测试代码还需要先进行测试）
4. 通过SSH连接到服务器。（mstsc）
5. 将项目在指定的位置进行备份。
6. 备份完成后，将项目文件拷贝到部署目录下。
7. 完成部署。

而如果是通过Jenkins自动化构建呢？

1. 打上tag。
2. 通过Git提交到代码管理仓库。
3. 等待Jenkins自动部署完成！

从上面的步骤就可以看出，只要你进行Git提交，Jenkins就会自动拉取Git仓库上的代码，然后自动进行打包，之后再通过SSH连接到需要部署的服务器，将最终的项目部署到服务器上面，最后会将部署结果发送到你的邮箱。

4.1 问题

Jenkins这么好，那有什么缺点呢？

缺点是有的，第一个就是学习成本较高，为了实现Jenkins自动化部署我几乎学了2天，遇到了各种各样的问题，其中一个问题就是网络环境问题。

众所周知，在外面的网站获取东西一般都会比较缓慢，甚至会出现构建失败的问题，所以Jenkins下载插件偶尔也会出现失败，怎么都无法进行下载，换任何镜像源都没有用，除非使用代理（这个问题困扰了我一天，然后我尝试了各种方法，进行了很多尝试，甚至一个一个的安装插件，说多了都是泪…）。

在项目构建时因为node-sass下载失败而出现构建失败。（这个问题几乎无解，除非使用代理，或者手动进行下载，但是手动进行下载又需要看自己的网络环境是否能连接GitHub，并且还要下载对应版本，其实最好的方法就是使用sass替换node-sass）。

最后一点就是在docker中安装Jenkins，而Git仓库又在本地，从而造成无法拉取项目，无法触发WebHooks等问题，这个问题到现在都没有进行解决。

5. 最后

非常充实的半个月，学到了非常多东西，除了上面这些比较大的知识点外还有一些小的知识点。而且我对于WebStorm的熟练度又上升到了一个新的层次，WebStorm的系列文章又快要来了！