Springboot + Vue 登录功能实现

   这里采用基于Token验证的方式进行登录，开干之前我们先将思路捋一下，前端将用户登录的信息通过表单请求后台，后端服务器判断用户账号密码正确之后，根据用查询结果、定义好的秘钥、过期时间 生成 token ，返回给前端，前端拿到后端返回的 token ,存储在 localStroage，前端在采用导航守卫在每次路由跳转时判断 localStroage 有无 token ，没有则跳转到登录页，有则请求获取用户信息或者进行转跳，实现登录。

预览：

Springboot部分

在Meavn中导入对应的jwT依赖

<!-- JWT相关--

<dependency>    

      <groupId>io.jsonwebtoken</groupId>   

       <artifactId>jjwt</artifactId>    

        <version>0.7.0</version>

</dependency>

      建立一个Utilis工具类 ，根据定义Token 过期时间,密钥 ,令牌前缀等生成token令牌和token的解析。值得注意的是Jwt里的数据是BASE64编码的，没有进行加密，因此不要放入敏感数据。生成的token如下：DDHeyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJEREgiLCJpbWciOiTcxfQ.i37He6dOrv13qagIVdEkV2SgF0NDpgwliCrd8A5OLhI解析的token格式为：{sub=xxx, img=, id=2, name=东云, iat=1624439994, exp=1625044794} 。

Controller层代码如下：

Service层：

前端部分

前台使用element ui 进行搭建，通过全局的路由守卫实现登录。

使用 router.beforeEach 注册一个全局前置守卫，守卫是异步解析执行，resolve 完之前一直处于等待中。next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。故在next方法中取token，若是没有token值时请求其他的路由时让页面不发生转跳并为了用户体验进行提升，否则执行转跳。全局前置守卫官方文档导航守卫| Vue Router (vuejs.org)

前台登录页面如下：

登录逻辑的实现：

希望路过的大佬不要嫌弃，若有不对之处还希望指正为谢！@~@