目录
- 验证码
- 登录
- 注册
- 权限角色菜单使用
- 路由配置调节
- 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如下图
登录
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()
字典使用
场景设计时有多个状态 使用字典存储 构思好状态后在若依字典中新增
代码自动生成
创建数据库,利用代码自动生成工具,生成前端和后端及数据库模块
生成后得到的文件分别放在对应的目录下