目录
实现一个网页未登录时自动跳转至登录界面?
在地址栏输入url之后,如果当前localStorage中并未存储token并且我们要去的网页并不是登录页面,可想而知,应当强制跳转至登录页面。这里就可以利用vue-router的路由守卫来实现。
- 利用
beforeEach
,当token存在或者要去往的页面是登录页面(我要登录总还是可以的吧~),直接放行; - 否则,利用next跳转至登录界面(路由为'/login')
// src/router/index.js
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token')
if (token || to.path === '/login') {
next()
} else {
next('/login')
}
})
用户名与密码正确后登录又如何跳转至首页(或者其他页面)?
实现了上面的约束之后,我们就可以来实现登录功能了。
当用户名密码正确之后,点击登录,但这时我们还无法跳转至首页,因为上面的路由守卫中还需要token,我们应能从后端获取到token,并将该token存入localStorage中,并利用router.replace('/')
来进行路由跳转。
以下是一个小例子:
// 利用element plus的表单功能
const submitForm = (formRef) => {
formRef.validate((valid) => {
if (valid) {
// 如果表单校验成功并且用户名和密码正确,则将token存储起来,并跳转至首页
if (loginForm.value.username === 'admin' && loginForm.value.password === 'admin') {
localStorage.setItem('token', 'i have token!')
router.replace('/')
}
} else {
console.log('error')
}
})
}
标签:登录,跳转,next,token,注册,router,相关,页面
From: https://www.cnblogs.com/liuyxcc/p/16906741.html