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

login.vue

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);
			})
		},

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