前后端分离基于vue 实现用户登录和token验证

最新推荐文章于 2025-06-14 09:35:44 发布

原创

最新推荐文章于 2025-06-14 09:35:44 发布 · 1.4k 阅读

收录于

当前文章被以下社区和专栏收录：

本文详细介绍了如何在前后端分离的架构中，使用Vue.js进行用户登录操作并实现Token验证。首先，前端通过调用后端接口发送用户名和密码。接着，成功登录后，Token被存储在Vuex状态管理和本地存储中。为确保每次请求携带Token，添加了请求拦截器。此外，还利用路由导航守卫检查localStorage中的Token，防止未登录用户直接访问受保护的页面。

前后端分离基于vue 实现用户登录和token验证

一. 首次登录前端调取后端接口把用户名密码返回给后端进行判断
html部分。

<div class="sign-in">
				<h2>欢迎登录</h2>
				<p><input type="text" placeholder="请输入账号" v-model="username"></p>
				<p><input type="password" placeholder="请输入密码" v-model="password"></p>
				<p><button @click="linkto">登录</button></p>
			</div>

JS部分。

linkto() {
			var text = this.username
			var password = this.password
			if (text == '' || text == null) {
				alert("请输入正确的用户名");
				return
			} else if (password == '' || password == null) {
				alert("请输入正确的密码");
				return
			}
			getUser({
				"username": text,
				"password": password
			}).then(res => {
				let data = res
				console.log(res)
				if(data.code == 10000){
					this.$store.commit('login', data)
					this.$message({
						message: data.msg,
						type: 'success'
					});
					this.$router.push('/about')

标签

#vue.js