我是如何完成一个基础登陆页面账号密码验证机制的

原理：
1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码
2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token
3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面
4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面
5、每次调后端接口，都要在请求头中加token
6、后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401
7、如果前端拿到状态码为401，就清除token信息并跳转到登录页面

我们先进行login.vue中的内容添加：

v-model="loginForm.username"：
<el-input class="el-input" placeholder="Username" 
v-model="loginForm.username"><template slot="prepend">帐号</template></el-input> 

v-model="loginForm.password"：
<el-input class="el-input" placeholder="Password" 
v-model="loginForm.password"><template slot="prepend">密码</template></el-input>

绑定：@click = "onSubmit"
 <el-button class="onload" @click = "onSubmit">登陆</el-button>

onSubmit函数 ——login. vue
+写入数据

import { mapMutations } from 'vuex';//导入

  data() {
	      return {
			  loginForm: {
				  username: '',
				  password: ''
			  }
	      }
	    },
 methods: {
			...mapMutations(['changeLogin']),//辅助函数
	      onSubmit() {
	        let _this = this;
	              if (this.loginForm.username === '' || this.loginForm.password === '') {
	                alert('账号或密码不能为空');
	              } else {
	                this.$axios({
	                  method: 'post',
	                  url: 'http://47.92.92.207/login/',
	                  data: _this.loginForm
	                }).then(res => {
	                  console.log(res.data);
	                  _this.userToken = 'Bearer ' + res.data.token;
	                  // 将用户token保存到vuex中
	                  _this.changeLogin({ Authorization: _this.userToken });
	                  _this.$router.push('/user');
	                  alert('登陆成功');
	                }).catch(error => {
				      console.log(error);
	                  alert('账号或密码错误');
	                  // console.log(error);
	                });
				}
	      }
	    }

解释：url: ‘http://47.92.92.207/login/’, 这是一个做好的后端接口，可以直接用于测试。账号密码为： bb bb123456
axios:url:用于请求服务器

_this.$router.push(’/user’); 路由跳转到指定的url

_this.userToken = 'Bearer ’ + res.data.token; // Bearer Token :token的一种形式

Authorization：请求消息头，用于服务器验证用户代理身份的凭证
HTTP协议中的 Authorization 请求消息头含有服务器用于验证用户代理身份的凭证，通常会在服务器返回401 Unauthorized 状态码以及WWW-Authenticate 消息头之后在后续请求中发送此消息头。
在此 Authorization是否可以被另一个名字代替，尚不明确

获取token：_this.userToken = 'Bearer ’ + res.data.token;
将用户token保存到vuex中： _this.changeLogin({ Authorization: _this.userToken });

写vuex store/index.js文件

state: {
	  // 存储token
	  Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : ''
  },
  mutations: {
	  // 修改token，并将token存入localStorage
	  changeLogin (state, user) {
	  state.Authorization = user.Authorization;
	  localStorage.setItem('Authorization', user.Authorization);
	  }
  },

localStorage.getItem(‘Authorization’)//获取本地储存的值
localStorage.setItem(‘Authorization’, user.Authorization);//将user.Authorization存入Authorization

main.js中：

axios的配置：

import axios from 'axios'
Vue.config.productionTip = false
Vue.prototype.$axios = axios;

// 路由导航守卫
router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    next();
  } else {
    let token = localStorage.getItem('Authorization');
 
    if (token === 'null' || token === '') {
      next('/login');
    } else {
      next();
    }
  }
});
 
// 添加请求拦截器，在请求头中加token
axios.interceptors.request.use(
  config => {
    if (localStorage.getItem('Authorization')) {
      config.headers.Authorization = localStorage.getItem('Authorization');
    }
 
    return config;
  },
  error => {
    return Promise.reject(error);
  });
  
  /*http response 拦截器*/
  axios.interceptors.response.use(
      undefined,
      error => {
          let res = error.response;
          switch (res.status) {
              case 401:
                  console.warn("token 过期重登录!");
                  // this.$router.push('/');
                  break;
              case 403:
                  console.log('您没有该操作权限');
                  break;
              case 500:
                  console.log('服务器错误');
          }
          return Promise.reject(error.response.data);//返回接口返回的错误信息
      });