axios拦截器

基本思想

首先要知道登录不仅仅是拿着用户名和密码通过接口发给后端就大功告成了,要从几个方面考虑

  • 异步登录，通过登录接口拿到token
  • 利用vuex的state管理token、用户信息等
  • 利用axios拦截器，拦截每一次请求/响应来处理token
1
2
token是用户登录成功的标识，每一次请求数据时都要发送token给后端验证 & 接收后端返回状态码判断当前用户登录状态

登录的基本实现

点击按钮触发事件Login.vue文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
methods: {
  async submitHandler(e) {
    e.preventDefault();
    try {
      const result = await this.$http.get("/api/login", {
        params: this.model,
      });
     if(result.code=='0'){
       this.$store.commit('settoken',result.token)
       window.localStorage.setItem('token',result.token)
     }else{
       alert(result.messages)
     }
    } catch (error) {
      console.log(error);
    }
  }

Vuex中 store中代码

1
2
3
4
5
6
7
8
9
10
11
export default new Vuex.Store({
  state: {
    token: ''
  },
  mutations: {
    // 设置vuex的token
    settoken(state, token) {
      state.token = token
    }
  }
})

axios拦截器

我的拦截器目录是 src\setaxios.js

main.js中全局注册使用

1
2
import  setaxios  from  './setaxios'
setaxios()

setaxios.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import  axios  from 'axios'

import  store  from  './store/index'
import  router  from './router/index'

// http全局拦截
// token要放在我们请求的header上面带回去的后端


export  default  function  setAxios(){
  // 请求拦截
  axios.interceptors.request.use(
    config=>{
      if(store.state.token){
        config.headers.token=store.state.token;
      }
      return  config
    }
)
// 每次的请求都是有返回的，都是先经过这个拦截器的
axios.interceptors.response.use(
  response=>{
    if(response.status==200){
      const  data=response.data
      if(data.code==-1){
        // 登录过期  需要重新登录，清空vuex的token和localstorage的token
        store.commit('settoken','')
        localStorage.removeItem('token')
        // 跳转到login页面
        router.replace({path:'/login'})
      }
      return  data
    }
    return  response
  }
)
}

token存储成功

为什么要使用vuex

因为通过登录得到的用户信息在多个组件中都会用到，使用vuex直接通过state或getter访问变量很方便。但不要为了使用vuex而使用vuex

既然用了vuex为什么还要将token存放到localStorage/sessionStorage/cookie中去

因为刷新会导致vuex的state中的变量重置为初始值（「变量值会丢失」）