vue+vuex+axios实现登录、注册页权限拦截

在GitHub上有很多写好的模板，这个项目也是基于模板做的。

现在记录一下我做的过程

1、修改config文件夹里的dev.env.js里的BASE_API，把地址改成请求后端的公共部分

BASE_API: '"http://192.168.xx.xx"', 

2、接下来就是操作src文件，先在 views里写好vew组件（login.vue,regist.vue），写好到router里的index.js里配置好路径

login.vue

<template> <div class="login-container">  <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"     label-width="0px"     class="card-box login-form">   <h3 class="title">登录</h3>   <el-form-item prop="name">  <span class="svg-container svg-container_login">   <svg-icon icon-class="user"/>  </span>    <el-input name="name" disabled type="text" v-model="loginForm.name" autoComplete="on"      placeholder="用户名"/>   </el-form-item>   <el-form-item prop="password">  <span class="svg-container">   <svg-icon icon-class="password"></svg-icon>  </span>    <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password"      autoComplete="on"      placeholder="密码"></el-input>    <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye"/></span>   </el-form-item>   <el-form-item>    <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">    登录    </el-button>   </el-form-item>  </el-form>  </div></template><script> export default { name: 'login', data() {  const validateUsername = (rule, value, callback) => {  if (value.trim().length<1) {   callback(new Error('用户名不能为空'))  } else {   callback()  }  };  const validatePass = (rule, value, callback) => {  if (value.trim().length < 1) {   callback(new Error('密码不能为空'))  } else {   callback()  }  };  return {  loginForm: {   name: '',   password: ''  },  loginRules: {   name: [{required: true, trigger: 'blur', validator: validateUsername}],   password: [{required: true, trigger: 'blur', validator: validatePass}]  },  loading: false,  pwdType: 'password'  } }, methods: {  showPwd() {  if (this.pwdType === 'password') {   this.pwdType = ''  } else {   this.pwdType = 'password'  }  },  handleLogin() {  this.$refs.loginForm.validate(valid => {   if (valid) {   this.loading = true;   this.$store.dispatch('Login', this.loginForm).then(() => {    this.loading = false;    this.$router.push({path: '/'});   }).catch((e) => {    this.loading = false   })   } else {   console.log('error submit!!')   return false   }  })  } } }</script>

router/index.js

{ path: '/login', component: _import('Login/login'), hidden: true }