vue實現web登錄權限控制

實現原理：vueRouter控制前端頁面跳轉路由，當登陸成功後，返回用戶登陸token信息，將token信息放到store中，router路由跳轉取store中狀態有token時，當取到token時跳轉到首頁，反之跳轉到登陸頁。

步驟：

1.登錄校驗：

2.路由配置：

3.全局導航守衛：

vueRouter.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    // 判斷該路由是否須要登陸權限
    console.log(store)
      if (store.state.root.token) {  // 經過vuex state獲取當前的token是否存在
          next()
      } else {
          alert('請登陸')
          next({
              path: '/' //登陸路由
          })
      }
  } else {
      next()
  }
})

 

 

 

route