【Vue实战】简单的登录拦截实现

àì夳堔傛蜴生んèń 2022-11-24 12:58 134阅读 0赞

**一、实现目标**  
    **1.引言**  
      作为一个刚做入门Vue的一个新手，可能会存在这样的疑惑，我是不是可以直接输入URL进行访问，那登录就没有意义了啊。为了解决这个问题，就得使用登录拦截器来实现。关于登录拦截，前后端都可以做，这里我简单介绍一下Vue前端的登录拦截。  
    **2.需求分析**

当输入访问非登录界面时，进行拦截分析，若有存储账号即可访问，未存储又不是登录界面就进行拦截并跳转登录界面。

**二、具体实现**  
    **1.准备工作**  
    （1）router（重点beforeEach）和Vue的搭建  
    （2）LocalStorge的了解[参考文章][Link 1]

**2.关键代码**

login组件在登录成功使用LocalStorage存储

this.$axios.post('/adminLogin',params
           ).then( (response)=>{   //注意使用箭头函数
                // handle success
           // this.responseResult=JSON.stringify(response);
           // if(response.status)
               if(response.status==200){ 
                 if(response.data==true){ 
                   console.log(response);
                   console.log(response.data);
                   localStorage.setItem("userName",this.username);
                   this.$notify({ 
                     title:'成功',
                     message:'登录成功',
                     type:'success'
                   })
                   // alert(response.data);
                   // this.check=response.data;
                   this.$router.push({ path:'/home'});
                 }else { 
                   alert("密码错误，请重新输入");
                 }
               }else{ 
                 console.log('失败');
                 alert("连接服务器失败")
               }
    
              })
              .catch(function (error) { 
                // handle error
                console.log(error);
                alert("连接服务器失败")
              })
          },

store的index.js文件加入meta:\{requireAuth:\{true\}\}

{ 
          path: '/healthWarning',
          name: 'healthWarning',
          component:healthWarning,
          meta:{ requireAuth: true}
        },

main.js中进行beforeEach的使用

router.beforeEach((to, from, next) => { 
    
          if(to.name !==" /" && localStorage.getItem("userName")==null){ 
    
            alert("请先登录")
    
            this.$router.push({ path:'/'})
    
          }else next();
    
        })

[Link 1]: https://blog.csdn.net/justlpf/article/details/82662365