目录

  • 验证码
  • 登录
  • 注册
  • 权限角色菜单使用
  • 路由配置调节
  • token介绍
  • 发送请求以及响应拦截
  • 字典使用
  • 代码自动生成


验证码

前端请求后端验证码接口,后端生成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如下图

若依框架前端文件架构图_若依框架前端文件架构图_02

登录

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()

字典使用

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

代码自动生成

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