nodejs+express+svg-captcha驗證碼實現，在vue中使用

後臺接口搭建

1. 安裝：cnpm i svg-captcha -S
2. 接口的設置：

userRouter.get('/getCaptcha', (req, res) => {
    res.header('Access-Control-Allow-Origin', "*");
    const cap = captcha.create({
        size: 4,
        ignoreChars: '0o1il',
        noise: 1,
        color: true,
        background: '#cc9966'
    });
    req.session.captcha = cap.text; // session 存儲
    res.type('svg'); // 響應的類型
    res.send(cap.data);
})

複製代碼

3. 必須使用cookie進行存值
   • 安裝：cnpm i express-session -S
   • 在app.js中進行引入：

const session = require('express-session');
 app.use(session({
  secret: 'luckystar',
  name: 'captcha',
  resave: false,
  saveUninitialized: true,
  cookie: { maxAge: 50000 },
  rolling: true,
}));
複製代碼

4. 在vue中進行引用：

<el-form-item prop="password">
       <el-input placeholder="請輸入驗證碼" v-model="loginForm.captcha">
       //img中的src就是node後臺設置的驗證碼的請求地址
         <img
           class="captcha-img"
           src="http://localhost:3003/user/getCaptcha"
           slot="append"
           @click="changeCaptcha"
         />
       </el-input>
       <i class="el-icon-edit-outline el-icon"></i>
</el-form-item>

<script>
methods:{
   changeCaptcha(e){
       e.target.src = `http://localhost:3003/user/getCaptcha?${Math.random()}`;
   }
}
</script>

複製代碼

以上這四步是將驗證碼顯示在前端界面上，並無進行數據的提交