在我们进行登录的时候，为了保护系统的安全性，也是防止恶意进行登录，进入到后台盗取数据，因此我们在登录的环节进行一定的安全保护，提升系统安全等级。在此我们运用阿拉伯数字和英文字母进行4位数的验证码校验，当然也可以进行多位字符进行校验，在此我使用生成4位验证码进行校验
验证码：前端绑定后端生成得验证码图片，前端提交表单信息到后端进行验证，后端验证码存入session
一、环境准备：
我这里由于本机上的还是vue 2 所以这边还是vue2开发的，而且主要是好嫖组件，毕竟不是专业的前端。
这里的话由于某些原因，我这里使用的包管理是cnpm
不为别的就为了安装的时候不会被雷到。
这里先装一个 vuex 用来管理状态，怎么装一条命令的事情。
二、功能展示：
三、项目结构：
四、验证码生成：
{{item.code}}export default {name: "ValidCode",model: {prop: 'value',event: 'input'},props: {width: {type: String,default: '100px'},height: {type: String,default: '34px'},length: {type: Number,default: 4}},data () {return {codeList: []}},mounted () {this.createdCode()},methods: {refreshCode () {this.createdCode()},createdCode () {const len = this.lengthconst codeList = []const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789'const charsLen = chars.length// 生成for (let i = 0; i item.code).join(''))},getStyle (data) {return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`}}}.ValidCode{display: flex;justify-content: center;align-items: center;cursor: pointer;span{display: inline-block;}}五、验证码使用：
1.首先需要解决的是登录的跨域问题，使用我们的axios进行解决:
import axios from 'axios'import {serverIp} from "../../public/config";const request = axios.create({baseURL: `http://localhost:9090`,// 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！timeout: 5000})// request 拦截器// 可以自请求发送前对请求做一些处理// 比如统一加token，对请求参数统一加密request.interceptors.request.use(config => {config.headers['Content-Type'] = 'application/json;charset=utf-8';let user = localStorage.getItem("user") " /> {return Promise.reject(error)});// response 拦截器// 可以在接口响应后统一处理结果request.interceptors.response.use(response => {let res = response.data;// 如果是返回的文件if (response.config.responseType === 'blob') {return res}// 兼容服务端返回的字符串数据if (typeof res === 'string') {res = res ? JSON.parse(res) : res}return res;},error => {console.log('err' + error) // for debugreturn Promise.reject(error)})export default request2.在需要的页面进行引入
import request from "@/utils/request";import ValidCode from "@/components/ValidCode";const Base64 = require('js-base64').Base64export default {name: "Login",components: {ValidCode},data() {return {form: {sex: 1,username: '',password: '',},checked: false,rules: {username: [{required: true, message: '请输入用户名', trigger: 'blur'},{min: 3, max: 10, message: "长度在3到10个字符", trigger: "blur"},],password: [{required: true, message: '请输入密码', trigger: 'blur'},{min: 1, max: 20, message: '长度在 6 到 11 个字符', trigger: 'blur'}],},validCode: '',}},}3.验证码校验
export default {name: "Login",components: {ValidCode},data() {return {form: {sex: 1,username: '',password: '',},checked: false,rules: {username: [{required: true, message: '请输入用户名', trigger: 'blur'},{min: 3, max: 10, message: "长度在3到10个字符", trigger: "blur"},],password: [{required: true, message: '请输入密码', trigger: 'blur'},{min: 1, max: 20, message: '长度在 6 到 11 个字符', trigger: 'blur'}],},validCode: '',}},}4.完整代码
xx宿舍-- 只为更好的你
账号登录登 录<!---->立即注册<!--点击注册--><!---->import request from "@/utils/request";import ValidCode from "@/components/ValidCode";const Base64 = require('js-base64').Base64export default {name: "Login",components: {ValidCode},data() {return {form: {sex: 1,username: '',password: '',},checked: false,rules: {username: [{required: true, message: '请输入用户名', trigger: 'blur'},{min: 3, max: 10, message: "长度在3到10个字符", trigger: "blur"},],password: [{required: true, message: '请输入密码', trigger: 'blur'},{min: 1, max: 20, message: '长度在 6 到 11 个字符', trigger: 'blur'}],},validCode: '',}},mounted () {let username = localStorage.getItem('username')if (username) {this.form.username = localStorage.getItem('username')this.form.password = Base64.decode(localStorage.getItem('password'))// base64解密this.checked = true}},created() {sessionStorage.removeItem("user")},methods: {register:function(){this.$router.push("/register");},//接收验证码组件提交的4位验证码createValidCode(data) {this.validCode = data},login() {this.$refs['form'].validate((valid) => {if (valid) {if (!this.form.validCode) {this.$message.error("请填写验证码")return}if (this.form.validCode.toLowerCase() !== this.validCode.toLowerCase()) {this.$message.error("验证码错误")return}request.post("/user/login", this.form).then(res => {if (res.code === '200'){// sessionStorage.setItem("user", JSON.stringify(res.data))//缓存用户信息localStorage.setItem("user", JSON.stringify(res.data))if (res.data.role === 'USER') {this.$router.push("/")} else {this.$router.push("/mall/index")}this.$message({type: "success",message: "登录成功"})} else {this.$message({type: "error",message: res.msg})}})}});},}}.form-toggle {margin: 20px 0;text-align: center}.form-toggle b {font-size: 20px;cursor: pointer;}附送
全局定义css并在main.js里面引入
import './assets/css/global.css'
* {margin: 0;padding: 0;box-sizing: border-box;}.ml-5 {margin-left: 5px;}.ml-10 {margin-left: 10px;}.mr-5 {margin-right: 5px;}.pd-10 {padding: 10px;}body {margin: 0;padding: 0;font-size: 14px;color: #666;--colorRed: orangered;}a {text-decoration: none;}⛵小结
以上就是对Vue实现路由导航简单的概述，使得我们的项目更加的趋于完美，也提升了我们对于编程的能力和思维！
如果这篇文章有帮助到你，希望可以给作者点个赞，创作不易，如果有对后端技术、前端领域感兴趣的，也欢迎关注 ，我将会给你带来巨大的收获与惊喜！