全面解析若依框架--springboot-vue前后分离02

验证码

前端请求后端验证码接口，后端生成uuid、验证码图片和结果保存到redis并设置有效期，将uuid和验证码返回给前端。前端输入验证码答案后在业务层进行验证码验证，将答案和uuid在redis中进行验证，判断是否过期以及答案是否正确

• 模块关闭验证码功能：在模块对应的业务层删除掉验证码即可
  对应目录：D:\RuoYi-Vue\ruoyi-framework\src\main\java\com\ruoyi\framework\web\service\SysLoginService.java

// 验证码校验
        validateCaptcha(username, code, uuid);

• 模块添加验证码功能：模仿登陆注册验证码，首先前端请求拿到uuid和渲染验证码图片，后端模块对应业务层开启验证码认证
  前端访问后端接口获取captchaImage

uuid：相当于键值对，每个用户都有一个uuid用于识别验证码属于哪个用户

前端反向代理，将target的url设为空，再进行拼接,前端显示url如下图

登录

sys_user表即为用户表，用户输入账户密码验证码登录，走到后端接口，走到验证码验证一套，登陆成功后接口返回用户信息，前端存储到全局状态管理中

注册

首先进入前端login.vue，修改register为true开启注册，后端数据库开启注册，然后进入若以系统的管理员账户->系统管理->参数设置->用户注册设置为true开启，进入注册的业务层进行判断、验重和保存

权限角色菜单使用

在若依系统中添加角色给角色添加菜单以及各个模块权限即可

路由配置调节

后端添加页面路由，创建文件夹‘创建页面即可完成新增页面，路由拦截，特定路由拦截验证token，特定路由开放白名单

• 在若依系统中找到系统管理->菜单管理->新增
  
  之后在前端的views目录下新增一个dianwo文件夹，里面新建一个index.vue，在router里配置一个全局路由

  {
    path: '/dianwo',
    component: () => import('@/views/dianwo/index'),
    hidden: true
  },

这样我们登录后点击菜单里的点击我按钮就能跳转到自定义的index页面，但是当我们退出登录之后再去访问localhost:81/dianwo就会被拦截，重新回到登陆页面
如何添加白名单呢？在permission.js的whiltList中添加路由即可

const whiteList = ['/login', '/register', '/dianwo']

token介绍

1、Token的引入：Token是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示，在这样的背景下，Token便应运而生。

2、Token的定义：Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。

3、使用Token的目的：Token的目的是为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。

了解了Token的意义后，我们就更明确的知道为什么要用他了。

二、如何使用Token？

1、用设备号/设备mac地址作为Token（推荐）

客户端：客户端在登录的时候获取设备的设备号/mac地址，并将其作为参数传递到服务端。

服务端：服务端接收到该参数后，便用一个变量来接收同时将其作为Token保存在数据库，并将该Token设置到session中，客户端每次请求的时候都要统一拦截，并将客户端传递的token和服务器端session中的token进行对比，如果相同则放行，不同则拒绝。

分析：此刻客户端和服务器端就统一了一个唯一的标识Token，而且保证了每一个设备拥有了一个唯一的会话。该方法的缺点是客户端需要带设备号/mac地址作为参数传递，而且服务器端还需要保存；优点是客户端不需重新登录，只要登录一次以后一直可以使用，至于超时的问题是有服务器这边来处理，如何处理？若服务器的Token超时后，服务器只需将客户端传递的Token向数据库中查询，同时并赋值给变量Token，如此，Token的超时又重新计时。

2、用session值作为Token

客户端：客户端只需携带用户名和密码登陆即可。

服务端：服务端接收到用户名和密码后并判断，如果正确了就将本地获取sessionID作为Token返回给客户端，客户端以后只需带上请求数据即可。

分析：这种方式使用的好处是方便，不用存储数据，但是缺点就是当session过期后，客户端必须重新登录才能进行访问数据。

发送请求以及响应拦截

前端发送请求时请求中设置token和响应拦截请求结果是否为特定的状态码
在前端uitls工具类的request.js中配置
可后端在SecurityConfig.java中设置白名单

// 对于登录login 注册register 验证码captchaImage 允许匿名访问
.antMatchers("/login", "/register", "/captchaImage").permitAll()

字典使用

场景设计时有多个状态 使用字典存储 构思好状态后在若依字典中新增

代码自动生成

创建数据库，利用代码自动生成工具，生成前端和后端及数据库模块
生成后得到的文件分别放在对应的目录下