VUE--vuex存储token+axios请求拦截配置

(一)项目需求+效果图

1.项目需求

【将输入的用户名和密码保存到localStorage里】
【如果已经登录，可以看到所有界面；如果未登录，只能看到部分界面。】

2.效果图

没有登录（没有在本地localStorage保存token）：只能看到首页、分类、搜索界面

已登录（在本地localStorage保存token）：可以看到全部界面

(二)代码+关键代码解析

1.代码

(1)Login.vue（登录界面）

 methods:{
       async submitHandler(e){
           e.preventDefault()
           try{
               const result=await this.$http.get('/api/login',{params:this.model})
               console.log(result.token)
               if(result.code=='0'){
                   this.$store.commit('settoken',result.token)
                   window.localStorage.setItem('token',result.token)
                   //判断路由是否带参，带参就去到重定向参数地址，否则就去首页
                   if(this.$route.query.redirect){
                       this.$router.replace({path:this.$route.query.redirect})
                   }else{
                       this.$router.replace({path:'/botnav/index'})
                   }
               }else{
                   alert(result.message)
               }
           }catch(err){
               console.log(err)
           }
       }
    }

(2)store.js（存储token）

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  //变量存储库
  state: {
    token:''
  },
  //通过同步的方法存储
  mutations: {
    //设置vuex的token
    settoken(state,token){
      state.token=token
    }
  },
  //异步的方法存储，需要警告mutations
  actions: {

  }
})

(3)setaxios.js（判断是否有token）

import axios from 'axios'
import store from './store'
import router from './router'

//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和localstorge的token
                    store.commit('settoken','')
                    localStorage.removeItem('token')
                    //调转到login界面
                    router.replace({path:'/login'})
                }
                return data
            }
            return response
        }
    )
}

(4)router.js(部分界面，需要有登录权限才可以看到；如何未登录的时候，点击登录之后才能看的界面，会自动跳转到登录界面)

  {
          path: 'cart',//购物车界面
          name: 'cart',
          meta:{
              requireAuth:true,//当有这个字段的时候，我们就认为这个路由页面是要有登录权限的
          },
          component: () => import('./views/Cart.vue')
        },
        {
          path: 'mine',//我的界面
          name: 'mine',
          meta:{
            requireAuth:true,//当有这个字段的时候，我们就认为这个路由页面是要有登录权限的
          },
          component: () => import('./views/Mine.vue')
        },

(5)main.js(引入路由拦截)

import setaxios from './setaxios'
setaxios()