Vue 之配置路由导航守卫（控制访问权限）+登录和退出登录

一、配置路由守卫

通过配置路由守卫，可以实现页面权限管理，控制用户对各页面的访问权限。
比如，用户只有登录之后才能访问其他页面，在 router 目录下的 index.js 中添加如下代码

router.beforeEach((to, from, next) => {
  // 1.如果访问的是登录页面（无需权限），直接放行
  if (to.path === '/login') return next()
  // 2.如果访问的是有登录权限的页面，先要获取token
  const tokenStr = window.sessionStorage.getItem('token')
  // 2.1如果token为空，强制跳转到登录页面；否则，直接放行
  if (!tokenStr) return next('/login')
  next()
})

to：代表将要访问的路径 from：代表从哪个路径跳转而来 next：是一个函数，代表放行
next函数有两种写法：next()，代表放行；next(‘路径’)，代表强制跳转

二、登录

基于 token 的登录需要在登录请求成功之后，在客户端产生一个 token 并保存在 sessionStorage 中，在当前网站打开期间生效，后续页面访问都要携带该 token

methods: {
  loginBtn () {
    // 表单预验证
    this.$refs.loginFormRef.validate(async valid => {
      if (!valid) return
      // 验证通过，发起登录请求
      const { data: res } = await this.$http.post('login', this.loginForm)
      if (res.meta.status !== 200) return this.$message.error('登录失败')
      this.$message.success('登录成功')
      // 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
      //   1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
      //   1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
      window.sessionStorage.setItem('token', res.data.token)
      // 2. 通过编程式导航跳转到后台主页，路由地址是 /home
      this.$router.push('/home')
    })
  }
}

三、退出登录

基于 token 登录验证的退出方式很简单，只需要销毁本地 token

methods: {
    loginout () {
      // 清空 token
      window.sessionStorage.clear()
      this.$router.push('/login')
    }
}