vue 美食杰项目 登录验证

		登录验证是我们在进入页面中必须要进行的操作。

1.登录验证我们要先在路由中(router)，设置一个路由守卫来判断你进入的页面需不需要进行登录，
然后在进行判断是否已经登录，在然后验证你的登录是否合法。

router.beforeEach( async (to,form,next) => {
    // 进入路由守卫时，向后端发送token，验证是否合法
  const data =  await userInfo()
  console.log(data.data);
   if(to.matched.some(item => item.meta.login)){
    const token =   localStorage.getItem('token')
    // !!是将数据类型转换为布尔值，如果有数据就转换成true，没有数据或者是空的转换为false
    const vv = !!token
        if(vv){
          if(data.error === 400){    // 后端告诉你，token不合法
            next({name:'login'})
            localStorage.removeItem('token')
            return;
          }
            next()
            return
        }
        if(!vv && to.name === 'login'){
            next()
        }
        if(!vv && to.name !== 'login'){
            next({name:'login'})
        }

   }else{
       next()
   }
})

然后就是在我们的路由中使用meta来判断没登录时点击页面要先登录，然后通过！！本地存储有没有值，就是有没有登录，最后在判断你登录的账号是否合法。

 <el-form
      label-position="top"
      label-width="100px" class="demo-ruleForm"
      :model = 'ruleFrom'
      :rules = 'rules'
    >
      <el-form-item label="用户名" prop="name">
        <el-input type="text" v-model="ruleFrom.name" placeholder="写上你的名字"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="ruleFrom.password"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button>重置</el-button>
      </el-form-item>


    </el-form>
js代码
     data() {
    return {
      ruleFrom:{
        name:'',
      password:''
      },

      rules:{
        name:[{
          required:true,message:'请输入用户名',trigger:'blur'
        }],
        password:[{
             required:true,message:'请输入用户名',trigger:'blur'
        }]
      }


      
    };
  },
方法
  submitForm(){
      login({
        name:this.ruleFrom.name,   
        password:this.ruleFrom.password
      }).then((data) => {
        console.log(data);
        if(data.code == 0){
          
          localStorage.setItem('token',data.data.token)
            window.location.href = '/';
        }
        if(data.code == 1){
          this.$message.error(data.mes)
        }
      })
      
    }

/**
 * 账号登录
 * @export
 * @param {Object} params - 
 * @param {string} params.name - 用户名
 * @param {string} params.password - 密码
 * @returns
 */
export async function login(params){
  return  await http.post('/user/login', params);
}

代码如上，我们在提交事件从后端拿到登录的api方法，通过then把你验证正确账号的token值保存在本地