vue-router的导航守卫简单应用

导航守卫简介

主要用来通过跳转或取消的方式守卫导航。
例如判断登录信息：没登录全部跳到登录页。判断必要操作是否进行没进行的话中断跳转。

分为三大类：全局守卫、路由守卫、组件守卫

meta简介

• meta（路由原信息）
• 为什么会有这个东西呢？
  我们知道我们浏览一些网站的时候有需要验证登录的也有不需要验证登录的，如果所有页面都在做成验证登录的话对于用户的体验也是极差的，所以这个时候路由元信息就起到了很大的作用。

最小实现

1. 与vuex中的AuthStore结合运用

//AuthStore.js

const state = {
  user:null,
  isLogin: false
}

const actions = {
  login({commit}, {username, password}) {
    return Auth.login({username,password})
      .then( res => {
        console.log(res)
        commit("setUser",{user: res.data})
        commit("setLogin",{isLogin: true})
      })
  },
  checkLogin(){
    console.log(("trueeeeee"))
  }
}

2. 给about这个路由对象添加meta

//router/index.js

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    meta:{ requiresAuth: true }
  },
  {
    path: '/register',
    name: 'Register',
    component: () => import('../pages/register/register.vue') 
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../pages/login/template.vue') 
  },
]

3. 使用全局守卫中的beforeEach

//router/index.js
import store from "../store/index"

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.

    // console.log(store.state.isLogin)
    store.dispatch("checkLogin")
    if (true) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})

4. 经测试，true中改直接使用store.state.isLogin是不可行的，修改如下：

//router/index.js
import store from "../store/index"

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    store.dispatch('checkLogin').then(isLogin=>{
      if (!isLogin) {
        next({
          path: '/login',
          query: { redirect: to.fullPath }
        })
      } else {
        next()
      }    
    })
  } else {
    next() // 确保一定要调用 next()
  }
})

5. 上面使用dispatch进行actions分发。接下来写对应的actions

//AuthStore.js
const actions = {
  //more code to come..

  async checkLogin({ commit, state}) {
    if(state.isLogin) return true
    let res = await auth.getInfo()
    commit('setLogin', { isLogin: res.isLogin })
    if(!res.isLogin) return false
    commit('setUser', { user: res.data })
    return true
  }
}

---

参考

1. 思否_Jason
2. [我的项目：vue技术栈实现博客应用_jwt鉴权与权限控制]