基于Vue实现登录模块流程总结

有没有同学在最开始学前端登录模块时对于应该干什么感到困惑？登录模块让做也能做出来，但是整体过程弄不清。vue，axios，vuex在这里如何配合也弄不清楚？本文就对基本的流程进行说明，相信你看完就会对登录部分有十分清晰的认识，之后再看复杂登录部分也完全不在话下。

---

目录

 

实现登录整体流程

1.UI与数据

2.请求服务器获取token

axios部分基础代码：

main部分基础代码： 

vuex部分基础代码：

UI登录方法基础代码： 

3.总结

---

实现登录整体流程

用户输入用户名密码，在axios请求头中添加apikey并以表单形式提交给服务器，服务器认证通过后，返回token值并存储到localstorage中，在axios请求拦截器中加入【config.headers.token=localStorage.token】以便下次访问资源能携带token。

有关token不清楚的前看我的这篇文章：

https://blog.csdn.net/qq_42539194/article/details/111520060

1.UI与数据

很简单，两个input标签一个账号一个密码。最后来一个button登录按钮，一个登录表单就实现了。

在登录组件中定义form存放数据，将name和password分别绑定账号和密码的对话框（点击“登录”按钮时就将这个form数据提交服务器）

data() {
    //这里存放数据
    return {
      form:{
        name:'',
        password:''
      }
    };
  },

2.请求服务器获取token

在设计登录模块时候，我们肯定是想用户登录一次就ok了，不需要反复登录，直接存储用户的账号和密码在前端十分不安全，所以一般操作是将用户名密码提交服务器后，服务器返回token值，那么我们接收到了这个token后存起来（一般在local Storage中），之后所有的请求数据都带上这个token才可以获取到。

axios部分基础代码：

这里设置了两个拦截器分别对请求和响应进行拦截设置，请求最关键的就是config.headers.token=localStorage.token在每次请求数据时都能将服务器返回的token塞进去。最后将axios抛出，以便在main函数内给原型上定义它使其在每个 Vue 的实例中可用。

切记token不要放到header中写死，否则只有第一次会带着token，应该在request请求拦截器中设置config.headers.token=localStorage.token;

import Axios from 'axios';
import {baseUrl}from '@/config.js';

let axios=Axios.create({
    baseURL:baseUrl,
    headers:{
        APIKEY:'6f81900c18bd4967ba4cb0b6cd123456'
    }
});
//请求拦截器
axios.interceptors.request.use((config)=>{
    config.headers.token=localStorage.token;
    return config;
},(err)=>{
    console.log('request拦截器出错',err);
});
//响应拦截器
axios.interceptors.response.use((res)=>{
    const {status,data,headers,config}=res;
    //304是从缓存读取数据，也是成功
    if (status>=200&&status<300||status==304) {
        //【用户登陆】的时候data有返回的数据，headers有服务器给的token验证
        //【用户注册】的时候也能返回这两个字段
        return {data,headers};
    }
    else{
        console.log('response响应失败');
        throw res;
    }
},(err)=>{
    console.log('response拦截器出错',err);
    throw err;
});

export default axios;

main部分基础代码： 

在vue的原型上定义，其他vue实例只要this.$axios即可调用axios访问服务器。

//引入axios并加入全局组件
import axios from './axios.js';
Vue.prototype.$axios=axios;

vuex部分基础代码：

其中state中的token要从localStorage中获取，这样用户只要不清空浏览器，始终都可以登录。

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const store =new Vuex.Store({
    state:{
       token:localStorage.token
    },
    mutations:{
        setToken(state,myToken){
            state.token=myToken,
            //向内存中存token
            localStorage.token=myToken
        }
    },
    actions:{

    }
});

export default store;

UI登录方法基础代码： 

async/await异步获取登录结果，因为在axios中response响应拦截器中 定义只返回data和header【return {data,headers}】，所以这里直接拿{data}即可，其中就可以获取token如图所示：

获取token之后，将token存如vuex中state中，在vuex中再将token存入localstorage中【看vuex代码】，这样任何界面都可以从localstorage中获取token了，最后在axios里request拦截器添加token【看axios代码】。

 methods: {
    ...mapMutations(['setToken']),
    async login(){
      let {data}=await this.$axios.post('/user/login',this.form);
      //console.log('登录data',data.data);
      let {token}=data.data;
      //console.log('登录token',token);
      //向vuex中传递token数据
      this.setToken(token);
    }
  },

3.总结

到目前为止，一个简单的登录逻辑就实现了，我们可以发现写一个登录页面十分容易，但是想写好还是有难度的，本文仅仅是提供一个基础流程，力求清晰易懂。后期在这个基础上还可以扩展很多很多内容，比如角色分配，权限分配，根据权限懒加载不同组件展示不同的内容.............................这里我也在学习中..................欢迎大家交流学习