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