vue项目中使用token登录验证

该博客介绍了在Vue项目中如何使用Token进行登录验证,以减轻服务器查询数据库的负担。用户登录时,通过axios发送POST请求,获取Token并保存在Vuex中,全局路由守卫检查Token是否存在,确保用户已登录才能访问特定页面。
摘要由CSDN通过智能技术生成

vue项目中使用token登录验证

Token是在客户端频繁向服务器发送请求,服务器需要频繁的去数据库查询用户名和密码并进行对比,判断用户名和密码是否正确,并作出相应提示,在这样的背景下,toekn技术便营运而生。

什么是token?

Token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,当第一次登录后,服务器生成一个Token便将此Token返回给客户端,以后客户端只需带上这个Token前来请求数据即可,无需再次带上用户名和密码。

为什么要使用token?

使用token是为了减轻服务器的压力,减少频繁的查询数据库,使服务器更加健壮。

<template>
  <el-form :model="ruleform" :rules="rules" ref="ruleform">
      <div class="mb30form">
        <el-form-item prop="username">
          <el-input
            class="mb30"
            v-model="ruleform.username"
            placeholder="用户名"
            prefix-icon="el-icon-user"
          ></el-input>
        </el-form-item>
      </div>
      <div class="mb30form">
        <el-form-item prop="password">
          <el-input
            class="mb30"
            v-model="ruleform.password"
            type="password"
            placeholder="密码"
            @keyup.enter.native="login('ruleform')"
            prefix-icon="el-icon-lock"
          ></el-input>
        </el-form-item>
      </div>
    <el-button class="truel loginbutton" @click="login('ruleform')"
      >登 录</el-button
    >
  </el-form>
</template>

<script>
import axios from "axios";
import { mapMutations } from "vuex";
export default {
	data() {
		return {
			rules: {
        		password: [{ required: true, message: "请填写密码", trigger: "blur" }],
		        username: [
		          { required: true, message: "请填写用户名", trigger: "blur" },
		        ]
		    },
      		ruleform {
				username: "",
				password: ""
			}
		}
	},
	methods: {
		...mapMutations(["changeLogin"]),
		login(formName) {
			this.$refs[formName].validate(() => {
				if (valid) {
		          const _this = this;
		          const data = {
		            username: this.ruleform.username,
		            password: this.ruleform.password,
		          };
		          axios
		            .post("/login/", data)
		            .then((response) => {
		              _this.userToken = "YTY" + new Date().getTime();
		              // 将用户token保存到vuex中
		              _this.changeLogin({ Authorization: _this.userToken });
		              this.role = response.data.groups[0];
		              this.redirect();
		            })
		            .catch(() => {
		              _this.userToken = "YTY";
		              // 将用户token保存到vuex中
		              _this.changeLogin({ Authorization: _this.userToken });
		              this.yan = true;
		              this.newTime();
		              this.ruleform.captcha = "";
		            });
		        } else {
		
		        }
			})
		}
	}
}
</script>

在路由表中进行全局路由守卫设置,检查token是否存在

router.beforeEach((to,from,next) => {
	if(to.path === '/login' || /^\/public\//.test(to.path)) {
		console.log(to.path === '/login' || /^\/public\//.test(to.path));
    	next();
	} else {
		let token = localStorage.getItem('Authorization');
	    console.log(token);
	    if (token === null || token === '') {
	      next('/login');
	    } else {
	      next();
	    }
	}
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值