vue2我想实现访问requiresAuth页面自动跳转到login页面,登录后再重定向到之前输入的url地址中,但是一直报错
Uncaught runtime errors:
Redirected when going from "/login?redirect=%2Fprojects" to "/projects" via a navigation guard.
本人刚学习vue不是很懂,望大家指点下。
版本:
{
"name": "test_p",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@vue/cli-plugin-router": "^4.5.19",
"axios": "^1.4.0",
"core-js": "^3.8.3",
"element-ui": "^2.15.13",
"vue": "^2.6.14",
"vue-router": "^3.6.5",
"vuex": "^3.6.2"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/eslint-config-standard": "^6.1.0",
"babel-eslint": "^10.1.0",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-vue": "^8.0.3",
"lint-staged": "^11.1.2",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"vue-template-compiler": "^2.6.14"
},
"gitHooks": {
"pre-commit": "lint-staged"
}
}
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store'
Vue.use(VueRouter)
const routes = [
{
path: '/login',
name: 'login',
component: () => import(/* webpackChunkName: "login" */'@/views/login')
},
{
path: '/',
component: () => import(/* webpackChunkName: "layout" */'@/views/layout'),
meta: { requiresAuth: true },
children: [
{
path: '',
name: 'home',
component: () => import(/* webpackChunkName: "home" */'@/views/home')
},
{
path: 'members',
name: 'members',
component: () => import(/* webpackChunkName: "member" */'@/views/members')
},
{
path: 'projects',
name: 'projects',
component: () => import(/* webpackChunkName: "project" */'@/views/projects')
}
]
}
]
const router = new VueRouter({
mode: 'history',
routes
})
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!store.state.current_user) {
return next({
name: 'login',
query: {
redirect: to.fullPath
}
})
}
next()
} else {
next()
}
})
export default router
login.vue
// 使用axios发送的请求
if (res.message === '登录成功') {
console.log(res, '<-------------')
this.$store.commit('set_user', res.token)
this.$store.commit('get_nick_name', res)
this.$router.push(this.$route.query.redirect || '/')
}
在src中新建pages/Login.vue
<template>
<div>
<div class="login-wrap" v-show="showLogin">
<h3>登录</h3>
<p v-show="showTishi">{{tishi}}</p>
<input type="text" placeholder="请输入用户名" v-model="username">
<input type="password" placeholder="请输入密码" v-model="password">
<button v-on:click="login">登录</button>
<span v-on:click="ToRegister">没有账号?马上注册</span>
</div>
<div class="register-wrap" v-show="showRegister">
<h3>注册</h3>
<p v-show="showTishi">{{tishi}}</p>
<input type="text" placeholder="请输入用户名" v-model="newUsername">
<input type="password" placeholder="请输入密码" v-model="newPassword">
<button v-on:click="register">注册</button>
<span v-on:click="ToLogin">已有账号?马上登录</span>
</div>
</div>
</template>
<style>
.login-wrap {
text-align: center;
}
input {
display: block;
width: 250px;
height: 40px;
line-height: 40px;
margin: 0 auto;
margin-bottom: 10px;
outline: none;
border: 1px solid #888;
padding: 10px;
box-sizing: border-box;
}
p {
color: red;
}
button {
display: block;
width: 250px;
height: 40px;
line-height: 40px;
margin: 0 auto;
border: none;
background-color: #41b883;
color: #fff;
font-size: 16px;
margin-bottom: 5px;
}
span {
cursor: pointer;
}
span:hover {
color: #41b883;
}
</style>
<script>
export default {
data() {
return {
showLogin: true,
showRegister: false,
showTishi: false,
tishi: '',
username: '',
password: '',
newUsername: '',
newPassword: ''
}
},
methods: {
login() {
if (this.username === '' || this.password === '') {
alert('请输入用户名或密码')
}
},
register() {
if (this.newUsername === '' || this.newPassword === '') {
alert('请输入用户名或密码')
} else {
}
},
ToLogin() {
this.showRegister = false
this.showLogin = true
},
ToRegister() {
this.showRegister = true
this.showLogin = false
}
}
}
</script>
Home.vue
<template>
<div>
<h3>欢迎 {{name}}</h3>
<a href="#" @click="quit">注销登录</a>
</div>
</template>