【Vue Router】010-导航守卫

const router = createRouter({ ... })

router.beforeEach((to, from) => {
  // ...
  // 返回 false 以取消导航
  return false
})

router.beforeEach(async (to, from) => {
  // canUserAccess() 返回 `true` 或 `false`
  return await canUserAccess(to)
})

// BAD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  // 如果用户未能验证身份，则 `next` 会被调用两次
  next()
})

// GOOD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

router.beforeResolve(async to => {
  if (to.meta.requiresCamera) {
    try {
      await askForCameraPermission()
    } catch (error) {
      if (error instanceof NotAllowedError) {
        // ... 处理错误，然后取消导航
        return false
      } else {
        // 意料之外的错误，取消导航并把错误传给全局处理器
        throw error
      }
    }
  }
})

router.afterEach((to, from) => {
  sendToAnalytics(to.fullPath)
})

router.afterEach((to, from, failure) => {
  if (!failure) sendToAnalytics(to.fullPath)
})

<template>
  <div>
    用户名：<input type="text" v-model.trim="obj.username" />
    密码：<input type="password" v-model.trim="obj.password" />
    <button @click="login">登录</button>
    <span>{{ obj.info }}</span>
  </div>
</template>

<script>
import { reactive } from '@vue/reactivity'
import { useRoute, useRouter } from 'vue-router'
export default {
  setup () {
    const obj = reactive({
      username: 'zibo',
      password: '123',
      info: '' // 用于保存登陆失败之后的提示信息
    })
    // 拿到 route，注意这两行代码需要在 setup 函数下调用，不可在方法中调用，否则返回空
    const route = useRoute()
    const router = useRouter()
    // 登录方法
    const login = () => {
      // 在实际场景中使用 Ajax 来请求服务器的数据，以进行验证
      if (obj.username === 'zibo' && obj.password === '123') {
        // 账号密码验证通过
        sessionStorage.setItem('isAuth', true)
        obj.info = ''
        // 如果存在查询参数（就是说用户打算访问某页面，在登录完成之后跳转到他想访问的页面）
        console.log(route)
        if (route.query.redirect) {
          const redirect = route.query.redirect
          // 跳转到登录前想要访问的页面
          router.replace(redirect)
        } else {
          // 跳到首页
          router.replace('/')
        }
      } else {
        // 密码错误
        sessionStorage.setItem('isAuth', false)
        obj.username = ''
        obj.password = ''
        obj.info = '账号或密码错误！'
      }
    }
    return { obj, login }
  }
}
</script>

<style>

</style>

import Login from '../views/Login.vue'
...
// 配置在一级导航里面
const routes = [
    ...
    {
        path: '/login',
        name: 'login',
        component: Login
	}
    ...
]
...
// 全局前置守卫
router.beforeEach(to => {
  // 判断目标路由是否为 login ，如果是就不同验证权限（直接返回 true ），反之验证权限
  if (to.path === '/login') {
    return true
  } else {
    // 判断用户是否已经登录，注意这里是对字符串进行判断
    if (sessionStorage.isAuth === 'true') {
      return true
    } else {
      return {
        path: '/login',
        query: { redirect: to.fullPath }
      }
    }
  }
})
...

import { createRouter, createWebHashHistory } from 'vue-router'
import Study from '../views/Study.vue'
import Home from '../views/Home.vue'
import News from '../views/News.vue'
import One from '../views/One.vue'
import Two from '../views/Two.vue'
import Books from '../views/Books.vue'
import Videos from '../views/Videos.vue'
import Book from '../views/Book.vue'
import Message from '../views/Message.vue'
import Login from '../views/Login.vue'
const routes = [
  {
    path: '/',
    component: Study,
    name: 'study',
    redirect: '/home',
    meta: {
      title: '主页'
    },
    children: [
      {
        path: '/home',
        name: 'home',
        component: Home,
        meta: {
          title: '主页'
        }
      }, {
        path: '/news',
        name: 'news',
        component: News,
        // redirect: '/news/test', // 可以直接重定向，就显示了 /news/test
        children: [
          {
            path: 'test',
            components: {
              one: One,
              two: Two
            }
          }
        ],
        meta: {
          title: '新闻'
        }
      }, {
        path: '/books',
        name: 'books',
        component: Books,
        children: [
          { path: '/book/:id', name: 'book', component: Book }
        ],
        meta: {
          title: '图书'
        }
      }, {
        path: '/videos',
        name: 'videos',
        component: Videos,
        meta: {
          title: '视频'
        }
      }, {
        path: '/message',
        name: 'message',
        component: Message,
        props: route => ({ query: route.query.q }),
        meta: {
          title: '消息'
        }
      }
    ]
  }, {
    path: '/login',
    name: 'login',
    component: Login,
    meta: {
      title: '登录'
    }
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

// 全局前置守卫
router.beforeEach(to => {
  // 判断目标路由是否为 login ，如果是就不同验证权限（直接返回 true ），反之验证权限
  if (to.path === '/login') {
    return true
  } else {
    // 判断用户是否已经登录，注意这里是对字符串进行判断
    if (sessionStorage.isAuth === 'true') {
      return true
    } else {
      return {
        path: '/login',
        query: { redirect: to.fullPath }
      }
    }
  }
})

// 全局后置钩子
router.afterEach(to => {
  // 这行代码写在全局前置守卫会更快
  document.title = to.meta.title
})

export default router

{
  path: '/videos',
  name: 'videos',
  component: Videos,
  meta: {
    title: '视频',
    // 设置需要登录验证才能访问本页面
    requiresAuth: true
  }
}

// 全局前置守卫
router.beforeEach(to => {
  // 判断该路由是否需要权限
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 路由需要验证，判断是否需要登录
    if (sessionStorage.isAuth === 'true') {
      return true
    } else {
      return {
        path: '/login',
        query: { redirect: to.fullPath }
      }
    }
  } else {
    return true
  }
})

const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: (to, from) => {
      // reject the navigation
      return false
    },
  },
]

function removeQueryParams(to) {
  if (Object.keys(to.query).length)
    return { path: to.path, query: {}, hash: to.hash }
}

function removeHash(to) {
  if (to.hash) return { path: to.path, query: to.query, hash: '' }
}

const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: [removeQueryParams, removeHash],
  },
  {
    path: '/about',
    component: UserDetails,
    beforeEnter: [removeQueryParams],
  },
]

const UserDetails = {
  template: `...`,
  beforeRouteEnter(to, from) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
  },
  beforeRouteUpdate(to, from) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
  },
}

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

beforeRouteUpdate (to, from) {
  // just use `this`
  this.name = to.params.name
}

beforeRouteLeave (to, from) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (!answer) return false
}