使用vue实现注册时将用户信息存储,在登录时判断用户身份跳转到不同页面
时间: 2023-05-18 15:02:58 浏览: 112
可以使用vue的路由守卫来判断用户身份并跳转到不同页面。在注册时,可以将用户信息存储在本地存储或者后端数据库中,然后在登录时获取用户信息并进行身份验证。具体实现可以参考以下代码:
// 注册页面
<template>
<div>
<input v-model="username" placeholder="请输入用户名">
<input v-model="password" placeholder="请输入密码">
<button @click="register">注册</button>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
register() {
// 将用户信息存储在本地存储或者后端数据库中
localStorage.setItem('username', this.username)
localStorage.setItem('password', this.password)
// 跳转到登录页面
this.$router.push('/login')
}
}
}
</script>
// 登录页面
<template>
<div>
<input v-model="username" placeholder="请输入用户名">
<input v-model="password" placeholder="请输入密码">
<button @click="login">登录</button>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// 获取用户信息并进行身份验证
const storedUsername = localStorage.getItem('username')
const storedPassword = localStorage.getItem('password')
if (this.username === storedUsername && this.password === storedPassword) {
// 身份验证成功,跳转到用户页面
this.$router.push('/user')
} else {
// 身份验证失败,提示用户重新输入
alert('用户名或密码错误')
}
}
}
}
</script>
// 路由守卫
router.beforeEach((to, from, next) => {
const storedUsername = localStorage.getItem('username')
if (to.path === '/user' && !storedUsername) {
// 用户未登录,跳转到登录页面
next('/login')
} else if (to.path === '/login' && storedUsername) {
// 用户已登录,跳转到用户页面
next('/user')
} else {
next()
}
})