Vue项目请求头添加token

一.调登陆接口后端返会token，将token存储到sessionStorage和vuex中

1.login.vue

<template>

  <div class="logcontainer"> 

          <div class="user-title">

            <p>用户登陆</p>

          </div>         

          <div class="user-body">       

                <input  v-model="loginForm.username" placeholder="请输入用户名/手机号" />

                <p class="user-error" v-if="!loginForm.username&&none">用户名/手机号不能为空</p>

                <input type="password" v-model="loginForm.password"  placeholder="请输入密码" />

                <p class="password-error" v-if="!loginForm.password&&none">密码不能为空</p>

                <button type="submit"  @click="loginIn" >登陆</button>          

          </div>       

  </div>

</template>

<script>

import { mapMutations } from 'vuex'

import axios from "axios"

import qs from "qs"

export default {

    data(){

        return{ 

          none: false,     

          loginForm: {

            username: '',

            password: ''

          }

        }

    },

    methods:{  

       ...mapMutations(['changeLogin']),

      loginIn(){  

        this.none=true        

         let _this = this; 

        if (!this.loginForm.username || !this.loginForm.password) {

           return ''   

       }else{

        let para={

          loginName:this.loginForm.username,       

          passWord:this.loginForm.password

        };

        axios.post(`${axios.defaults.baseURL7}/login`,qs.stringify(para))

        .then(res=>{

           if(res.data.status){

           _this.userToken=res.data.data

            // 将用户token保存到vuex中

          _this.changeLogin({ Authorization: _this.userToken });

         this.$router.push({path:"/home"})

           }else{

              this.$message.error(res.data.msg)

           }

        })   

      }         

      }          

      }

}

</script>

 

2.store.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

  state: { 

      // 存储token

    Authorization: sessionStorage.getItem('Authorization') ? sessionStorage.getItem('Authorization') : ''  

  },

  mutations: {

     // 修改token，并将token存入localStorage

    changeLogin (state, user) {

      state.Authorization = user.Authorization;

      sessionStorage.setItem('Authorization', user.Authorization);

    }

  }

})

2、main.js中请求头添加token

// 在请求头中加token

axios.interceptors.request.use(

  config => {

  // 判断是否存在token，若是存在的话，则每一个http header都加上token

    let token = sessionStorage.getItem('Authorization')

    if (!config.headers.hasOwnProperty('Authorization') && token) {

      config.headers.Authorization = token;

    }

    return config;

  },

  error => {

    return Promise.reject(error);

  });

3、路由导航守卫

1.在router.js中添加

import Vue from 'vue';
import Router from 'vue-router';
import login from '@/components/login';
import home from '@/components/home'; 
Vue.use(Router); 
const router = new Router({
  routes: [
    {
      path: '/',
      redirect: '/login'
    },
    {
      path: '/login',
      name: 'login',
      component: login
    },
    {
      path: '/home',
      name: 'home',
      component: home
    }
  ]
});
 

//导航守卫

// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登录

router.beforeEach((to, from, next) => {

  //debugger

  if (to.path === '/login') {

    next();

  } else {

    let token = sessionStorage.getItem('Authorization');

    if (!token) {

      next('/login');

    } else {

      next();

    }

  }

});

export default router;