团队项目(9)

全局前置守卫

router.beforeEach(async (to, from, next) => {

    //to:去的那个路由的信息

    //from:从那个路由而来的信息

    //next:放行函数!!!!!!

    //第一种：next(),放行函数，放行到它想去的路由！！！

    //第二种:next(path),守卫指定放行到那个路由去?

    //用户是否登录:取决于仓库里面是否有token！！！

    //每一次路由跳转之前需要用有用户信息在跳转,没有发请求获取用户信息在跳转！！！！

 

使用easy-mock新建登录接口，模拟用户数据

login(){
   const self = this;
   axios.get('https://easy-mock.com/mock/5c7cd0f89d0184e94358d/museum/login').then(response=>{
    var res =response.data.data,
      len = res.length,
      userNameArr= [],
      passWordArr= [],
      ses= window.sessionStorage; 
    // 拿到所有的username
    for(var i=0; i<len; i++){
     userNameArr.push(res[i].username);
     passWordArr.push(res[i].password);
    }
    console.log(userNameArr, passWordArr);
    if(userNameArr.indexOf(this.userName) === -1){
      alert('账号不存在！');
    }else{
     var index = userNameArr.indexOf(this.userName);
     if(passWordArr[index] === this.passWord){
      // 把token放在sessionStorage中
      ses.setItem('data', res[index].token);
      this.$parent.$data.userTitle = res[index].usertitle;
      //验证成功进入首页
      this.startHacking ('登录成功！');
      //跳转到首页
      this.$router.push('/index');
      // console.log(this.$router);
     }else{
      alert('密码错误！')
     }
    }
   }).catch(err=>{
    console.log('连接数据库失败！')
   })
  }