【学生管理系统】权限管理

# 7. 程序升级

## 7.1 登录升级

### 7.1.1 图片验证码

* 后端：
  * 需要一个生成验证码controller，并将生成的验证码随机字符串存放到redis中
  * 用户登录时，获得验证码，对验证码进行校验
* 前端：
  * 编写表单，显示验证码（编写函数修改图片验证码路径），点击时可以切换
  * 网关放行

1. 需要一个生成验证码controller，并将生成的验证码随机字符串存放到redis中

2. 用户登录时，获得验证码，对验证码进行校验

   @PostMapping("/login")
    public BaseResult login(@RequestBody TbUser tbUser) {
        //0.1 校验：图片验证码
        String key = "login" + tbUser.getUserName();
        String redisVerifyCode = stringRedisTemplate.opsForValue().get(key);
        stringRedisTemplate.delete(key);
        if(redisVerifyCode == null) {
            return BaseResult.error("验证码无效");
        }
        if(! redisVerifyCode.equalsIgnoreCase(tbUser.getImageVerifyCode())) {
            return BaseResult.error("验证码错误");
        }
        //.....
    }

3. 编写表单，显示验证码（编写函数修改图片验证码路径），点击时可以切换

4. 网关放行

### 7.1.2 邮箱验证码

* 方案1：使用邮件发送工具类，直接发送邮件。【选择】
  * 特点：工具依赖第三方，所以第三方如果比较慢时，我们的程序也会慢
* 方案2：使用MQ作为中间件共享发送的信息，然后使用MQ服务进行邮件的发送。（之前演示）
  * 特点：使用MQ将第三方解耦，我们的程序不需要依赖第三方的响应时间。

* 后端：
  * 准备工作：坐标、yml、工具类
  * 编写send方法，用于邮件的发送
  * 用户登录时，校验邮箱验证码
* 前端：
  * 提供填写邮箱的位置，并有发送按钮
  * 提供填写验证码的位置
  * 网关放行

* 后端：

  * 准备工作：坐标、yml、工具类

    ~~~xml
    <!-- JavaMail 启动器 -->
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-mail</artifactId>
            </dependency>
    ~~~

    ~~~yml
    spring:
      mail:
        host: smtp.126.com          #发送邮件服务器
        username: itcast_lt@126.com #账号
        password: 1qaz2wsx          #密码
        default-encoding: UTF-8     #默认编码时
    ~~~

    

  * 编写send方法，用于邮件的发送

 @Resource
    private JavaMailSender javaMailSender;

    @PostMapping("/send")
    public BaseResult send(@RequestBody TbUser tbUser) {
        try {
            // 随机验证码
            String code = RandomStringUtils.randomNumeric(4);
            // 保存到redis
            String key = "loginEmail" + tbUser.getUserName();
            stringRedisTemplate.opsForValue().set(key, code , 5 , TimeUnit.MINUTES);
            // 发送
            EmailUtils.sendEmail(javaMailSender, "用户登录", tbUser.getEmail(), "验证码为：" + code);
            // 返回
            return BaseResult.ok("邮件发送成功");
        } catch (Exception e) {
            e.printStackTrace();
            return BaseResult.error("发送邮件失败");
        }
    }

  * 用户登录时，校验邮箱验证码

  //0.2 校验：邮件验证码
        String keyEmail = "loginEmail" + tbUser.getUserName();
        String redisEmailVerifyCode = stringRedisTemplate.opsForValue().get(keyEmail);
        stringRedisTemplate.delete(keyEmail);
        if(redisEmailVerifyCode == null) {
            return BaseResult.error("email验证码无效");
        }
        if(! redisEmailVerifyCode.equalsIgnoreCase(tbUser.getEmailVerifyCode())) {
            return BaseResult.error("email验证码错误");
        }

* 前端：

  * 提供填写邮箱的位置，并有发送按钮

async sendEmail() {
      let { data: baseResult } = await this.$axios.post(`/user-service/user/send`, this.user)
      // 提示
      if( baseResult.code == 20000 ) {
        this.$message.success( baseResult.message )
      } else {
        this.$message.error( baseResult.message )
      }
    }

  * 提供填写验证码的位置

  * 网关放行

### 7.1.3 作业：短信验证码

## 7.2 学生列表升级

* 注释掉原有内容：

* 编写 asyncData 发送SSR请求

  ~~~js
    async asyncData( context ) {
      // ajax
      let { data: baseResult } = await context.$axios.get('/classes-service/classes')
      // 返回结果
      return {
        classesList: baseResult.data
      }
    },
  ~~~

  

* 注意：SSR发送请求时，无法获得浏览器端相应的内容（localStorage、sessionStorage、cookie 等）

  * 在网关放行

## 7.3 角色列表升级

* 注释已有的

* 编写asyncData发送2次ajax

  ~~~js
    async asyncData( context ) {
      // 发送2次ajax
      let ajax1 = context.$axios.get('/user-service/role')
      let ajax2 = context.$axios.get(`/user-service/perm/parent/0`)
      let [{data: roleBaseResult}, {data: permBaseResult}] = await Promise.all([ajax1, ajax2])
      // 处理数据
      return {
        roleList: roleBaseResult.data,
        permList: permBaseResult.data
      }
    },
  ~~~

* 网关配置