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()
  }
})
复制代码
复制代码

 

posted @   阿风小子  阅读(57)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示