vue+router.beforeEach實現登錄驗證路由攔截

1.在配置路由路徑的文件夾里加上如下圖的語句

2.在main.js裏添加

3.login.vue

<template>
  <div>
    <!--    表單-->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
      <!--      用戶名一行-->
      <el-row class="rowStyle">
        <el-col :span="18" :offset="3">
          <el-form-item prop="userName">
            <el-input  class="inputStyle" v-model="ruleForm.userName" placeholder="用戶名"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18" :offset="3">
          <el-form-item prop="password">
            <el-input  class="inputStyle" v-model="ruleForm.password" placeholder="密碼"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="rowStyle">
        <el-col :span="18" :offset="3">
          <el-form-item>
            <el-button class="buttonStyle buttonStyle1" @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18" :offset="3">
          <el-form-item>
            <el-button class="buttonStyle buttonStyle2" @click="submitForm('ruleForm')">登錄</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
    export default {
        name: "register.vue",
        data() {
            return {
                ruleForm: {
                    userName: '',
                    password:''
                },
                rules: {
                    userName: [
                        { required: true, message: '請輸入用戶名', trigger: 'blur' },
                        { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
                    ],
                    password:[
                        { required: true, message: '請輸入密碼', trigger: 'blur' },
                        { min: 3, max: 6, message: '長度在 3 到6 個字符', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
             submitForm(formName) {
               let _this = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
            this.$axios.post('/login/login',            
            this.$qs.stringify({ 
              name: this.ruleForm.userName, 
              password: this.ruleForm.password })
               )
            .then(res => {
              console.log(res)
               sessionStorage.setItem("token", 'true');
              _this.$router.push({path: '/homePage/homePagePeople'})
              // if(res.data.code == '1') {
              //    this.errorTip = false;
              //    alert("登錄成功"+res.result.name);
              //   this.$router.push({path: '/homePageLike'})
              // }
            })
            .catch(function(error) {
                  console.log(error);
                });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

重點代碼爲紅框處