在vue中如何获取token，并将token写进header

落日映苍穹つ 2023-06-16 13:54 44阅读 0赞

跨域问题这里就不多说了,直接进入今天正题:

export default {
    		name: 'login',
    		data() {
    			return {
    				phone: '',
    				password: '',
    				device_type: '',
    				// registration_id: '', //极光推送 用户设备唯一标识 注册ID
    				token: '',
    			}
    		},
    		mounted() {
    		},
    		methods:{
    			goBack() {
    				this.$router.replace('/personage')
    			},
    			sub() {
    				let _this = this
    				if (_this.type == 1) {
    					if (_this.phone == '') {
    						alert('手机号不能为空')
    						return false
    					}
    					if (!(/^1[3|4|5|6|7|8|9]\d{9}$/.test(_this.phone))) {
    						alert('手机号码格式不正确');
    						return false;
    					}
    					if (_this.password == '') {
    						alert('密码不能为空')
    						return false
    					}
    					if (_this.password < 6 || _this.password > 20) {
    						alert('账号或密码错误')
    						return false
    					}
    				}else{
    					_this.$axios({
    						method: 'post', 
    						url: _this.HICK + '/app/reg/login',
    						data: {
    							phone: _this.phone,
    							password: _this.password,
    							device_type: '未知设备',
    						},
    					})
    					.then(res => {
    						// console.log(res.data)
    						_this.token = res.data.data
    						console.log(_this.token)//获取到的token
    						// this.$store.commit('set_token', _this.token)
    						this.$store.commit('set_token', _this.token)
    						if (store.state.token) {
    							alert('登录成功')
    							this.$router.push('/')
    							console.log(store.state.token)
    						} else {
    							this.$router.replace('/login');
    						}
    						
    					})
    					.catch(error => {
    						alert('账号或密码错误')
    						console.log(error)
    					})
    				}
    			}
    		}
    		
    	}

接下来我们在src下创建store/index.js

import Vue from 'vue'
    import Vuex from 'vuex'
     
     
    Vue.use(Vuex)
     
    export default new Vuex.Store({
    	state:{
    		token:''
    	},
    	mutations:{
    		set_token(state, token) {
    			state.token = token
    			sessionStorage.token = token
    		},
    		del_token(state) {
    			state.token = ''
    			sessionStorage.removeItem('token')
    		}
    	}
    });

main.js

import Vue from 'vue'
    import App from './App'
    import router from './router'
    import axios from 'axios'
    import store from './store/index.js'
    
    
    //axios赋值给变量http		将axios挂到vue原型上
    Vue.prototype.$axios = axios
    // 进行api映射
    Vue.prototype.HOST = '/api'
    Vue.prototype.HICK = '/app'
    
    
    Vue.config.productionTip = false
    
    //定义全局默认配置
    axios.defaults.headers.common['Authentication'] = store.state.token;
    
    
    
    /* eslint-disable no-new */
    new Vue({
    	el: '#app',
    	router,
    	store,
    	components: { App },
    	template: '<App/>'
    });
    
    
    
    
    
    // 添加请求拦截器
    axios.interceptors.request.use(config => {
    	// 在发送请求之前做些什么
    	//判断是否存在token，如果存在将每个页面header都添加token
    	if(store.state.token){
    		config.headers.common['Authentication']=store.state.token
    	}
     
    	return config;
    	}, error => {
    		// 对请求错误做些什么
    		return Promise.reject(error);
    });
     
    // http response 拦截器
    axios.interceptors.response.use(
    	response => {
    	 
    		return response;
    	},
    	error => {
    	 
    		if (error.response) {
    			switch (error.response.status) {
    				case 401:
    				this.$store.commit('del_token');
    				router.replace({
    				path: '/login',
    				query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
    			})
    		}
    	}
    	return Promise.reject(error.response.data)
    });

router/index.js

import Vue from 'vue'
    import Router from 'vue-router'
    import store from '@/store/index.js'
    
    
    Vue.use(Router)
    
    // 页面刷新时，重新赋值token
    if (sessionStorage.getItem('token')) {
    	store.commit('set_token', sessionStorage.getItem('token'))
    }
    
    const router = new Router({
    	mode: 'history',
    	routes: [
    		{
    			//个人中心
    			path: '/personage',
    			name: '个人中心',
    			component: () => import('@/views/Personage')
    		},
    		{
    			//登录
    			path: '/login',
    			name: 'login',
    			component: () => import('@/views//member/login'),
    			meta: {
    				show: true,
    			}
    		}
    	]
    });
    
    //导航守卫
    // 使用router.beforeEach注册一个全局前置守卫,判断用户是否登录
    router.beforeEach((to, from, next) => {
    	if (to.matched.some(r => r.meta.requireAuth)) {           //这里的requireAuth为路由中定义的 meta:{requireAuth:true}，意思为：该路由添加该字段，表示进入该路由需要登陆的
    		if (store.state.token) {
    			next();
    		} else {
    			next({
    				path: '/login',
    				query: {redirect: to.fullPath}
    			})
    		}
    	} else {
    		next();
    		}
    	})
    
    export default router

以上就配置完了?最后附带一个自己的使用吧

export default{
    		name: 'Personage',
    		data () {
    			return {
    				token: '',
    			}
    		},
    		mounted() {
    			this.$axios.post(this.HICK + '', {
    				token: window.sessionStorage.getItem("token")
    			})
    			.then(res => {
    				console.log(res.data)
    			})
    			.catch(error => {
    				console.log(error);
    			})
    		},

共同学习,希望能一起讨论