1.3 登录

1.3.1 生成验证码

基本思路

前端实现

后端生成表达式，1+1 = 2
1+1=？转成图片，传到前端进行展示
把答案2存入Redis服务器中
用户输入2之后点击登录传到后台，然后把redis服务器中的2和用户输入的数据进行对比
http://localhost/dev-api/captchalmage 前端
vue获取图片，↑请求访问的是前端还是后端？
反向代理，url请求前端，进行代理，映射到后端，解决跨域问题 proxy: {
// detail: cli.vuejs.org/config/#dev…]: {target:http;//localhost;8080',
changeOrigin: true,
pathRewrite: {['' + process,env.VUE_APP_BASE_API]:''
}}
/dev-api 替换成 '' 再映射到Http://1ocalhost:8080
http://localhost:8080/captcratmage 后端

后端实现

右键find in path or ctrl+shift+F搜索captcratmage
后端，返回Uid和图片，前端设置uid和图片，uid也存到redis里面了

代码实现

前端实现

在前端的登录页面login.vue中
在created()初始化方法中有一个getCode()方法

***getCodeImg()***,then(res => {
this,captcha0noff = res.captcha0noff === undefined ? true : res,captcha0n0ff;if (this.captcha0noff) {***this.codeUrl = "data:image/gif;base64,"(生成url图片展示到前端) + res.img***;this.loginForm,***uuid = res.uuid***(服务器的key值存在前端表单一份);
}
})}```

getCodeImg↓从api底下的login脚本引入

import{ getCodeImg } from "@/api/login"

        return ***request***({
            url:'/captchImage',
            method:'get',
            timeout:20000
            })}```

request↓从utils的request引入

import request from '@/utils/request'

request.js:

    ///axios中baseURL选项表示URL公共前缀
    baseURL: process.env.VUE_APP_BASE_API,
    // 超时
    timeout: 10000
    })

开发环境：.env.development:

VUE_APP_BASE_API ='/dev-api'

vue.config.js:

// detail: https://cli.vuejs.org/config/#devserver-p[process.env.VUE_APP_BASE_API]: {target:“http://localhost:808p*changeOrigin: true
pathRewrite: {['' + process.env.VUE_APP_BASE_API]:..
//dev-api 替换成''再映射到8080即springboot后端里

后端实现

//生成验证码
@GetMapping("/captchaImage")
public AjaxResult getCode(HttpServletResponse response) throws IOException
{
//后端数据模型
AjaxResult ajax = AjaxResult.success();
//判断验证是否开启
boolean captcha0n0ff = 
configService.selectCaptcha0noff();
ajax.put("captcha0noff"，captcha0noff);
if (!captcha0nOff)
{return ajax;}
}

1.3.2登录的实现

前端实现

this.$refs.loginForm.validate(valid => {if (valid) {
this.loading = true;
//是否记住密码，记住就存cookie，不勾选就不存coookie
if (this.loginForm.rememberMe) {Cookies.set("username", this.loginForm.username, { expires: 30 });Cookies,set("password", encrypt(this,loginForm.password),[ expires: 30 ));Cookies.set('rememberMe'， this.ubginForm,rememberMe, { expires: 30 });
}else {
Cookies.remove("username");
Cookies.remove("password"):
Cookies.remove('rememberMe');
}
//跳转到login.js
this.$store.dispatch( type: "Login"，this.loginForm).then(() => (this.$router.push({ path: this.redirect ll "/" }).catch(()=>{});).catch(0) => {
this.Loading = false;if (this.captcha0noff) {this.getCode();} ```


export function login(username， password, code, uuid) 
const data = 
username
password
code 
uuid
}
return request({url:'/login',method: 'post',data: data

})
}

通过反向代理把url映射到8080 所以搜索/login

登录的具体流程

后端：

1、校验验证码
2、校验用户名和密码
3、生成Token
代码实现：

点击login 进入到login里面就是进行各种验证

ry-笔记

1.3 登录

1.3.1 生成验证码

1.3.2登录的实现

登录的具体流程