Vue 框架基础 -router导航守卫

router导航守卫

定义：在路由跳转过程中（从登录login路由到main主界面）在跳转前，跳转中，跳转后定义的对应点的处理函数。

导航守卫分类

全局导航守卫 => 钩子函数

1. 全局前置导航守卫 beforeEach

三个必要参数：

• to 即将要进入的目标，用一种标准化的方式
• from 当前导航正要离开的路由，用一种标准化的方式
• naxt 继续向下执行（注意：naxt()是一个函数,调用的时候继续执行路由跳转，不调用就会停止跳转）

创建全局前置导航守卫的步骤：

• 创建一个名为 permission.js的 js 文件
• 引入router 路由模块
• 在入口文件main.js 入口文件内引入 全局前置导航守卫文件

// main.js入口文件
import '@/permission.js' // 引入全局前置导航守卫

import  router from '@/router' // 引入router
/**
 * 创建全局前置守卫 beforeEach
 * to 即将要进入的目标，用一种标准化的方式
 * from 当前导航正要离开的路由，用一种标准化的方式
 * naxt 继续向下执行
 */
router.beforeEach((to,from,next)=>{
  console.log(to)
  console.log(from)
  next() // 放行
  }

全局前置导航守卫登录验证代码示例

登录身份验证

登录成功之后才能访问主界面

• 1.全局前置守卫 beforeEach 处理身份认证
• 2.判断是否登录，如果登录就放行 next()
  2.1 如何判断登录是否成功，通过 Token 【判断】
• 处理不需要登录身份认证的路由拿到当前路由信息 /login, / 设置通行白名单 [ ]

router.beforeEach((to,from,next)=>{
  // console.log();
  // 白名单，不需要登录认证的路由
  let whiteArry = ['/SignIn','/']
  // 当前路由
  if(whiteArry.indexOf(to.path)!==-1){
    next() // 放行
    return
  }
  // 登录身份认证
  let token = localStorage.getItem('Token')
  if(token){
 // 已登录
    next() 
  }else{
    next('/SignIn')
  }
})

全局后置导航守卫