用户登陆操作

用户登陆操作

登录失败

向用户提示错误信息：

效果图：

注意：此种方式会导致报错固化，所以我们需要编写代码如下：

如此将会针对不同的错误进行不同的提示

登录成功

登录成功之后我们需要执行如下操作：

1. 存储到vuex
2. 存储到本地存储
3. 成功提示
4. 跳转到后台首页

/*
1.存储到vuex

• store目录 —modles目录 --新建【user.js（作为用户信息的存储）
• 在index.js中引入user.js
• 设置user.js基础结构
• 注意：当用户登录成功后，我们需要将用户数据data存储起来
  2.存储到本地存储
  */
  

添加请求拦截器

axios.interceptors.request.use((config)=>{
       console.log(config)
       let token = window.sessionStorage.getItem("token)
       if(config.token === true){
            config.headers.token = token
       }
       console.log(config)
       //再次发送请求之前做些什么
       return config;
}, (error)=>{
       //对请求错误做些什么
       return Promise.reject(error);
});

添加响应拦截器

axios.interceptors.response.use((response)=>{
        console.log("响应拦截器  成功“)
        //对响应数据做点什么
        return  response；
}，（err)=>{
        //console.log("响应拦截器 失败")
        //console. log(err)
        if(err.response.data && err.response.data.errorCode){
        //this.$message.error(err.response.data.msg);
        Vue.prototype.$message(err.response.data.msg)
        }
         //对响应错误做点什么
         return Promise.reject(err);
});

全局前置守卫

router.beforeEach((to,from,next) =>{
       //获取本地存储
       let token = window.sessionStorage.getItem("token")
       //判断token是否为真
       if(token){
                 //已登录
                 //请不要重复登录
                 if（to.path === ”/login“）{
                             //返回from
                             return next({name:from.name})                                 
                      }
                      next()
         }else{
                   //未登录
                   if(to.path === "/login"){
                               return next()
                   }
                   vue.prototype.$message("请先登录")
                   next（{name:"login"}）
         }

})

退出登录

logout(){
          axios.post("admin/logout",{},{
          //headers：{
                       // token：this.user.token
            //}
            token:true                         
            })
            //退出登录成功
            .then(res=>{
                    console.log(res)
                    //提示用户退出登录成功
                    this.$message('退出成功')
                    //清除vuex状态数据
                    this.$store.commit("logout")
                    //返回到登陆首页
                    //this.$router.push({name:"login"})
              })
              //退出登录失败
              .catch(err =>{
                           //console.log(err)
                           if(err.response.data && err.response.data.errorCode){
                                              this.$message.error(err.response.data.msg);
                                 }
                                 //清除vuex状态数据
                                 this.$store.commit("logout")
                                 //返回到登录页
                                 this.$router.push({name:"login"})
                  })
}

有什么问题大家可以留言哦！