vue项目中使用token登录验证

最新推荐文章于 2024-07-22 13:42:28 发布

琪兮奈若何

最新推荐文章于 2024-07-22 13:42:28 发布

阅读量422

点赞数 3

文章标签： vue.js es6

本文链接：https://blog.csdn.net/qqzjyywxa/article/details/111291755

版权

该博客介绍了在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();
	    }
	}
})