【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:

实现一个简单的登录逻辑。但是如果已经登录，那么就不应该让用户继续访问到登录页面：
修改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:

修改路由信息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:

GIF.gif

同样修改一下登录页面的交互：