react 实现图片验证码

react 实现图片验证码，这里举三个例子，都是自己总结的并且简要分析下三种的区别🍔🍔
🍖后端图片验证码是从这里找的。使用的是 svg 格式! 🍖

后端node 返回图片验证码:https://blog.csdn.net/Wick__/article/details/104733193

1.🍦🍦 直接用url 进行网络访问

const Demo = () =>{
const [url, setUrl] = useState(null)
let u = `http://localhost:8080/getcode`
 useEffect(() => {
        changeCode()
    }, [])
  function changeCode() {
         setUrl(u)
    }
  return (
 <img src={url} alt="验证码图片" onClick={changeCode} />
  )
}

🥐🥐这种方法很简单。但是由于是url 发起的请求，图片可能会被浏览器缓存下来，但是对于图片验证码来说，这种不需要缓存。这种方式不是最好的。

浏览器缓存机制: https://www.cnblogs.com/chengxs/p/10396066.html

2.🍴🍴 把后端返回的图片 转为html 元素并渲染

在上边的案例更改下 ,   - 代表删除代码   + 代码增加的代码
利用 axios 请求url

- let u = `http://localhost:8080/getcode`
+ async function changeCode(){
+ const response  = await axios.get("http://localhost:8080/getcode")
+ let v = response['data']
+ if (v) {
+    setUrl(v)
+  }

- <img src={url} alt="验证码图片" onClick={changeCode} />
+ <div dangerouslySetInnerHTML={{__html: url}} onClick={changeCode}</div>

🥐🥐这个方法利用 字符串 转 html 来实现 svg 的渲染。而且避免缓存。但是又涉及到前后端的请求跨域问题。需要在后端配置请求跨域。还有一个就是 把svg 渲染之后，该svg 标签的 width 和 height 不太好控制。也就是css样式控制比较麻烦。当然非 svg 格式的也可以返回的。主要是看后端生成什么图片格式。

3. 🍭🍭利用后端返回的 字符串svg转 base64 配合 img src 完美！

const CodeImg = ({ toLarger }) => {
    const [url, setUrl] = useState(null)
    // const u = `http://localhost:8080/getcode`
    async function changeCode() {
        
        const response = await axios.get("/getcode" );
        let v = response['data']
        if (v) {
            v = `data:image/svg+xml;base64,${window.btoa(v)}`
            setUrl(v)
        }
        //console.log(response.headers['codesession'])
    }

    useEffect(() => {
        changeCode()
    }, [])

    return (
        // <div className="codeImg" dangerouslySetInnerHTML={{__html: url}} onClick={changeCode} style={{height: toLarger ? '46px' : '32px'}}></div>
        <img src={url} alt="验证码图片" style={{ height: toLarger ? '46px' : '32px' }} onClick={changeCode} />
    )
}

图片转base64 ：https://blog.csdn.net/qq_45832807/article/details/119218975

🥐🥐🥐🥐第三种方式是中规中矩的了
🥠🥠优点:

1. axios 请求，后端返回 图片字符串 转base64 嵌入到 data:image/svg+xml;base64, 来控制 img 的src属性
2. 这么做也看起来比较专业点
3. img 的css 样式 好控制,本文通过一个 toLarger( boolean类型 )来控制 img height
4. console.log(response.headers['codesession']) 这行的存在是因为 利用 axios 还可以 控制后端存放的 cookie或者 sessionID 值等其他响应头信息.具体的读者可以自由拓展。
   
   完美.png