vue 路由守卫

橙子a123

已于 2022-10-20 19:50:33 修改

阅读量298

点赞数

于 2022-07-19 16:12:14 首次发布

本文链接：https://blog.csdn.net/weixin_68169041/article/details/125874503

版权

Vue.js 路由守卫登录验证 sessionStorage token

关键词由CSDN通过智能技术生成

在myobj文件下的router文件下的index.js,

里面写入

<script>

router.beforeEach((to,from,next)=>{
  var strobj=sessionStorage.getItem('token')
  console.log(strobj);
  if(to.name=='DengLu'){
           next()
  }else{
     if(strobj!=='' && strobj != null){
             next()
     }else{
      next('/DengLu')
     }
  }


})

</script>

登录页面写入 本地存储判断username || password

一下代码 vue
 methods: {
        fun() {
            console.log(this.objj);
            if (this.objj == '' || this.objjj == '') {
                alert('必填项不能为空')
            } else {
                this.$router.push({
                    path: "/Zhuyemian"
                })
            }
            if(this.objj=='abcd'&& this.objjj=='123456'){
                sessionStorage.setItem('token',this.objj)
               this.$router.push({
                    path: "/Zhuyemian"
                })
            }else{
                alert(
                    '填空不正确'
                )
                this.$router.push({
                    path: "DengLu"
                })
                this.objj=''
                this.objjj=''
                
            }

        }
    },




//axios  

  如果：请求登录接口的话  拿到token值  存储一下
            sessionStorage.setItem('token', res.data.data.token)
可以打印一下请求的链接里面有没有token值
     
     在 router文件的index.js配置一下守卫即可
     
   例如：
 router.beforeEach((to, from, next) => {
  var strobj = sessionStorage.getItem('token')
  console.log(strobj);  //账号
  if (to.name == 'LoginDlu') {
    next()
  } else {
    if (strobj) {
      next()
    } else {
      next('/LoginDlu')
    }
  }
})