【vue3.0】8.0 某东到家（八）——路由守卫实现登录校检功能、注册页面的实现
限制只有登录才能访问首页，而不登录只能打开登录界面。
这就用到路由守卫功能。
修改路由配置文件``：
import {
createRouter,
createWebHistory
} from 'vue-router'
const routes = [{
path: '/',
name: 'Home',
component: () => import(/* webpackChunkName: "home" */ '../views/home/Home.vue')
}, {
path: '/login',
name: 'Login',
component: () => import(/* webpackChunkName: "login" */ '../views/login/Login.vue')
}]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
// beforeEach:每次做路由跳转之前都会执行这个操作。
router.beforeEach((to, from, next) => {
// to and from are Route Object,
// to:跳转的时候想要跳转的页面的信息
// from :指从哪里跳过来的信息
// next() must be called to resolve the hook}
// 中间件继续执行的方法
const isLogin = const isLogin = false
console.log(to, from)
/** 判断是否登录 */
// 必须双循环，才能防止死循环
if (isLogin || to.name === 'Login') {
next()
} else {
// 如果没有登录，就跳到登录页面
next({
name: 'Login'
})
}
})
export default router
这样，无论什么子路径都会跳转到登录页面。
修改是否登录为本地存储：
......
const isLogin = localStorage.isLogin // 从本地存储中取isLogin
......
修改src\views\login\Login.vue:
<template>
<div class="wrapper">
<img class="wrapper__img" src="/i18n/9_16/img/user.png" />
<div class="wrapper__input">
<input class="wrapper__input__content" placeholder="请输入手机号码" />
</div>
<div class="wrapper__input">
<input
type="password"
class="wrapper__input__content"
placeholder="请输入密码"
/>
</div>
<div class="wrapper__login-button" @click="handleLogin">登陆</div>
<div class="wrapper__login__item">
<div class="wrapper__login__item__link">立即注册</div>
<p class="wrapper__login__item__cut">|</p>
<div class="wrapper__login__item__password">忘记密码</div>
</div>
</div>
</template>
<script>
// 路由跳转方法
import { useRouter } from 'vue-router'
export default {
name: 'Login',
setup () {
// 获取路由实例
const router = useRouter()
// 登录按钮
const handleLogin = () => {
localStorage.isLogin = true
// 登陆之后重新做一次页面跳转，再访问下一个页面
router.push({ name: 'Home' })
}
return { handleLogin }
}
}
</script>
<style lang="scss" scoped>
@import '@/style/viriables';
.wrapper {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
&__img {
display: block;
margin: 0 auto 0.4rem auto;
width: 0.66rem;
height: 0.66rem;
}
&__input {
// box-sizing: border-box;//内部间距
height: 0.48rem;
margin: 0 0.4rem 0.16rem 0.4rem;
background: #f9f9f9;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.06rem;
&__content {
line-height: 0.48rem;
background: none;
border: none;
outline: none;
width: 100%;
font-size: 0.16rem;
color: $centent-notice-fontcolor;
&::placeholder {
color: $centent-notice-fontcolor;
}
}
}
&__login-button {
line-height: 0.48rem;
margin: 0.32rem 0.4rem 0.16rem 0.4rem;
background: #0091ff;
color: #fff;
box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 145, 255, 0.32);
border-radius: 0.04rem;
font-size: 0.16rem;
text-align: center;
}
&__login__item {
text-align: center;
&__link {
display: inline-block;
margin: auto 0.05rem auto 0.05rem;
text-align: center;
font-size: 0.14rem;
color: $centent-notice-fontcolor;
}
&__cut {
display: inline-block;
text-align: center;
font-size: 0.14rem;
margin: auto 0.05rem auto 0.05rem;
}
&__password {
display: inline-block;
text-align: center;
font-size: 0.14rem;
margin: auto 0.05rem auto 0.05rem;
color: $centent-notice-fontcolor;
}
}
}
</style>
实现一个简单的登录逻辑。但是如果已经登录，那么就不应该让用户继续访问到登录页面：
修改src\router\index.js:
import {
createRouter,
createWebHistory
} from 'vue-router'
const routes = [{
path: '/',
name: 'Home',
component: () => import(/* webpackChunkName: "home" */ '../views/home/Home.vue')
}, {
path: '/login',
name: 'Login',
component: () => import(/* webpackChunkName: "login" */ '../views/login/Login.vue'),
beforeEnter: (to, from, next) => {
// 只有访问Login页面之前才会执行次函数
const isLogin = localStorage.isLogin // 从本地存储中取isLogin
if (isLogin) {
// 如果登录，就跳到首页页面
next({
name: 'Home'
})
} else {
// 否则跳转到登录页面
next()
}
}
}]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
// beforeEach:全局，每次做路由跳转之前都会执行这个操作。
router.beforeEach((to, from, next) => {
// to and from are Route Object,
// to:跳转的时候想要跳转的页面的信息
// from :指从哪里跳过来的信息
// next() must be called to resolve the hook}
// 中间件继续执行的方法
const isLogin = localStorage.isLogin // 从本地存储中取isLogin
console.log(to, from)
/** 判断是否登录 */
// 必须双循环，才能防止死循环
if (isLogin || to.name === 'Login') {
next()
} else {
// 如果没有登录，就跳到登录页面
next({
name: 'Login'
})
}
})
export default router
当然，可以优化一下写法：
const routes = [{
path: '/',
name: 'Home',
component: () => import(/* webpackChunkName: "home" */ '../views/home/Home.vue')
}, {
path: '/login',
name: 'Login',
component: () => import(/* webpackChunkName: "login" */ '../views/login/Login.vue'),
beforeEnter: (to, from, next) => {
// 只有访问Login页面之前才会执行次函数
const {
isLogin
} = localStorage // 从本地存储中取isLogin
// 如果登录，就跳到首页页面;否则跳转到登录页面
isLogin
? next({
name: 'Home'
})
: next()
}
}]
......
// beforeEach:全局，每次做路由跳转之前都会执行这个操作。
router.beforeEach((to, from, next) => {
// to and from are Route Object,
// to:跳转的时候想要跳转的页面的信息
// from :指从哪里跳过来的信息
// next() must be called to resolve the hook}
// 中间件继续执行的方法
// 从本地存储中取isLogin
const {
isLogin
} = localStorage
console.log(to, from);
/** 判断是否登录 */
// 必须双循环，才能防止死循环
// 如果没有登录，就跳到登录页面
(isLogin || to.name === 'Login') ? next() : next({
name: 'Login'
})
})
注册页面的实现
注册页面和登录页面一致。
把登录页面复制到注册页面：
新建src\views\register\Register.vue:
<template>
<div class="wrapper">
<img class="wrapper__img" src="/i18n/9_16/img/user.png" />
<div class="wrapper__input">
<input class="wrapper__input__content" placeholder="请输入手机号码" />
</div>
<div class="wrapper__input">
<input
type="password"
class="wrapper__input__content"
placeholder="请输入密码"
/>
</div>
<div class="wrapper__login-button" @click="handleLogin">登陆</div>
<div class="wrapper__login__item">
<div class="wrapper__login__item__link">立即注册</div>
<p class="wrapper__login__item__cut">|</p>
<div class="wrapper__login__item__password">忘记密码</div>
</div>
</div>
</template>
<script>
// 路由跳转方法
import { useRouter } from 'vue-router'
export default {
name: 'Register',
setup () {
// 获取路由实例
const router = useRouter()
// 登录按钮
const handleLogin = () => {
localStorage.isLogin = true
// 登陆之后重新做一次页面跳转，再访问下一个页面
router.push({ name: 'Home' })
}
return { handleLogin }
}
}
</script>
<style lang="scss" scoped>
@import '@/style/viriables';
.wrapper {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
&__img {
display: block;
margin: 0 auto 0.4rem auto;
width: 0.66rem;
height: 0.66rem;
}
&__input {
// box-sizing: border-box;//内部间距
height: 0.48rem;
margin: 0 0.4rem 0.16rem 0.4rem;
background: #f9f9f9;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.06rem;
&__content {
line-height: 0.48rem;
background: none;
border: none;
outline: none;
width: 100%;
font-size: 0.16rem;
color: $centent-notice-fontcolor;
&::placeholder {
color: $centent-notice-fontcolor;
}
}
}
&__login-button {
line-height: 0.48rem;
margin: 0.32rem 0.4rem 0.16rem 0.4rem;
background: #0091ff;
color: #fff;
box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 145, 255, 0.32);
border-radius: 0.04rem;
font-size: 0.16rem;
text-align: center;
}
&__login__item {
text-align: center;
&__link {
display: inline-block;
margin: auto 0.05rem auto 0.05rem;
text-align: center;
font-size: 0.14rem;
color: $centent-notice-fontcolor;
}
&__cut {
display: inline-block;
text-align: center;
font-size: 0.14rem;
margin: auto 0.05rem auto 0.05rem;
}
&__password {
display: inline-block;
text-align: center;
font-size: 0.14rem;
margin: auto 0.05rem auto 0.05rem;
color: $centent-notice-fontcolor;
}
}
}
</style>
修改路由信息src\router\index.js：
import {
createRouter,
createWebHistory
} from 'vue-router'
const routes = [{
path: '/',
name: 'Home',
component: () => import(/* webpackChunkName: "home" */ '../views/home/Home.vue')
}, {
path: '/login',
name: 'Login',
component: () => import(/* webpackChunkName: "login" */ '../views/login/Login.vue'),
beforeEnter: (to, from, next) => {
// 只有访问Login页面之前才会执行次函数
const {
isLogin
} = localStorage // 从本地存储中取isLogin
// 如果登录，就跳到首页页面;否则跳转到登录页面
isLogin
? next({
name: 'Home'
})
: next()
}
},
{
path: '/register',
name: 'Register',
component: () => import(/* webpackChunkName: "register" */ '../views/register/Register.vue'),
beforeEnter: (to, from, next) => {
const {
isLogin
} = localStorage
isLogin
? next({
name: 'Home'
})
: next()
}
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
// beforeEach:全局，每次做路由跳转之前都会执行这个操作。
router.beforeEach((to, from, next) => {
// to and from are Route Object,
// to:跳转的时候想要跳转的页面的信息
// from :指从哪里跳过来的信息
// next() must be called to resolve the hook}
// 中间件继续执行的方法
// 从本地存储中取isLogin
const {
isLogin
} = localStorage
console.log(to, from)
/** 判断是否登录 */
// 必须双循环，才能防止死循环
// 如果没有登录，就跳到登录页面
const {
name
} = to
const
isLoginOrRegister = (name === 'Login' || name === 'Register');
(isLogin || isLoginOrRegister) ? next() : next({
name: 'Login'
})
})
export default router
接下来修改src\views\register\Register.vue:
<template>
<div class="wrapper">
<img class="wrapper__img" src="/i18n/9_16/img/user.png" />
<div class="wrapper__input">
<input class="wrapper__input__content" placeholder="请输入手机号码" />
</div>
<div class="wrapper__input">
<input
type="password"
class="wrapper__input__content"
placeholder="请输入密码"
/>
</div>
<div class="wrapper__input">
<input
type="password"
class="wrapper__input__content"
placeholder="请再次输入密码"
/>
</div>
<div class="wrapper__register-button">注册</div>
<div class="wrapper__register__item">
<div class="wrapper__register__item__link" @click="handleLoginClick">
已有账号去登陆
</div>
</div>
</div>
</template>
<script>
// 路由跳转方法
import { useRouter } from 'vue-router'
export default {
name: 'Register',
setup () {
// 获取路由实例
const router = useRouter()
const handleLoginClick = () => {
router.push({ name: 'Login' })
}
return { handleLoginClick }
}
}
</script>
<style lang="scss" scoped>
@import '@/style/viriables';
.wrapper {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
&__img {
display: block;
margin: 0 auto 0.4rem auto;
width: 0.66rem;
height: 0.66rem;
}
&__input {
// box-sizing: border-box;//内部间距
height: 0.48rem;
margin: 0 0.4rem 0.16rem 0.4rem;
background: #f9f9f9;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.06rem;
&__content {
line-height: 0.48rem;
background: none;
border: none;
outline: none;
width: 100%;
font-size: 0.16rem;
color: $centent-notice-fontcolor;
&::placeholder {
color: $centent-notice-fontcolor;
}
}
}
&__register-button {
line-height: 0.48rem;
margin: 0.32rem 0.4rem 0.16rem 0.4rem;
background: #0091ff;
color: #fff;
box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 145, 255, 0.32);
border-radius: 0.04rem;
font-size: 0.16rem;
text-align: center;
}
&__register__item {
text-align: center;
&__link {
display: inline-block;
margin: auto 0.05rem auto 0.05rem;
text-align: center;
font-size: 0.14rem;
color: $centent-notice-fontcolor;
}
}
}
</style>
GIF.gif
同样修改一下登录页面的交互：
<template>
<div class="wrapper">
<img class="wrapper__img" src="/i18n/9_16/img/user.png" />
<div class="wrapper__input">
<input class="wrapper__input__content" placeholder="请输入手机号码" />
</div>
<div class="wrapper__input">
<input
type="password"
class="wrapper__input__content"
placeholder="请输入密码"
/>
</div>
<div class="wrapper__login-button" @click="handleLogin">登陆</div>
<div class="wrapper__login__item">
<div class="wrapper__login__item__link" @click="handleRegisterClick">
立即注册
</div>
<p class="wrapper__login__item__cut">|</p>
<div class="wrapper__login__item__password">忘记密码</div>
</div>
</div>
</template>
<script>
// 路由跳转方法
import { useRouter } from 'vue-router'
export default {
name: 'Login',
setup () {
// 获取路由实例
const router = useRouter()
// 登录按钮
const handleLogin = () => {
localStorage.isLogin = true
// 登陆之后重新做一次页面跳转，再访问下一个页面
router.push({ name: 'Home' })
}
const handleRegisterClick = () => {
router.push({ name: 'Register' })
}
return { handleLogin, handleRegisterClick }
}
}
</script>
<style lang="scss" scoped>
@import '@/style/viriables';
.wrapper {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
&__img {
display: block;
margin: 0 auto 0.4rem auto;
width: 0.66rem;
height: 0.66rem;
}
&__input {
// box-sizing: border-box;//内部间距
height: 0.48rem;
margin: 0 0.4rem 0.16rem 0.4rem;
background: #f9f9f9;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.06rem;
&__content {
line-height: 0.48rem;
background: none;
border: none;
outline: none;
width: 100%;
font-size: 0.16rem;
color: $centent-notice-fontcolor;
&::placeholder {
color: $centent-notice-fontcolor;
}
}
}
&__login-button {
line-height: 0.48rem;
margin: 0.32rem 0.4rem 0.16rem 0.4rem;
background: #0091ff;
color: #fff;
box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 145, 255, 0.32);
border-radius: 0.04rem;
font-size: 0.16rem;
text-align: center;
}
&__login__item {
text-align: center;
&__link {
display: inline-block;
margin: auto 0.05rem auto 0.05rem;
text-align: center;
font-size: 0.14rem;
color: $centent-notice-fontcolor;
}
&__cut {
display: inline-block;
text-align: center;
font-size: 0.14rem;
margin: auto 0.05rem auto 0.05rem;
}
&__password {
display: inline-block;
text-align: center;
font-size: 0.14rem;
margin: auto 0.05rem auto 0.05rem;
color: $centent-notice-fontcolor;
}
}
}
</style>
发表评论 (审核通过后显示评论)：