前后端分离项目-社交管理系统之处理跨域请求axios，配置Vuex(state,getters,mutations,actions),请求拦截，获取Token，解析Token学习笔记(四)

写在前面

项目的学习和制作来到了各种细节处理和关键的Vuex的阶段。前面实现了配置路由，展示的跳转等功能。现在记录学习过程中值得反复多看的问题和技术。

axios跨域请求

这个项目后端代码部署在端口500，前端在8080。这就导致了跨域问题的出现，在前端页面中用axios请求服务器端口8080的资源则不会有问题。否则就产生了跨域。
使用axios的方法很简单，在client文件目录下npm i axios。在src文件夹下mian.js引用

import axios from 'axios'
Vue.prototype.$axios = axios
//在Vue中创建一个$axios 这样我们就可以在vue里面使用axios

==来到client文件夹下index.js文件中 ==
找到dev下的proxyTable。他的原理可以理解为用/api代替http://localhost:5000/api/，这样我们在使用的时候就不存在从另一个服务器中请求数据的问题了。

 proxyTable: {
		'/api': {
		target: 'http://localhost:5000/api/',
		changeOrigin: true,//允许跨域
		pathRewrite: {
		'^/api': ''
		}
		},
// 原理就是把target用/api代理，在使用时，axios请求时直接/api 就可以解决跨域问题
	},

然后我们在使用的时候

this.$axios
	.post('/api/user/register',this.newUser)

配置Vuex

cd进client中

npm i vuex

下载完成后，（1）在src文件夹下新建目录store（数据仓库）。我们用这个数据仓库存储状态。我们有注册登录的功能。之前在制作接口的时候用postman进行测试的时候，在进行用户操作的时候，我们是需要带着令牌token进行的。那么如何让我们的请求带着Token（请求拦截）这个稍后介绍。如何存储状态，比如当前用户在登录状态，那么理应有他的数据信息，例如有个user。我们可以访问这些信息，而用户进行了退出，则user就被清空。
（2）创建index.js进行配置。

import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters'
import * as mutations from './mutations'
import * as actions from './actions'

Vue.use(Vuex)
const state ={
	//要管理的状态
	isAuthenticated:false,//是否认证 根据这东西看是否能访问我们的页面
	user:{}
	
}
export default new Vuex.Store({
	state,
})

import * as xxx from ‘xxx’ 会将 “xxx” 中所有 export 导出的内容组合成一个对象返回
因为我们还要创建getters等，例如getters里面有两个变量，如果传统导出就得
import isAuthenticated,{user} from ‘./getters’
而且getters中还要进行默认抛出 export default isAuthenticated,{user}

state就是要管理的状态。一个就是isAuthenticated，如果我们通过登陆成功得到了Token那么我们再通过请求拦截带着token去进行其他的操作。另一个就是user。这都比较好理解。
（3）在数据仓库文件夹中创建一个getters.js文件。

export const isAuthenticated = state =>state.isAuthenticated
export const user = state =>state.user

（4）mutations，用来更改状态,mutations是唯一更改状态的方法话不多说直接代码

export const  setIsAuthenticated = (state,data)=>{
	state.isAuthenticated = data
}

export const  setUser = (state,data)=>{
	state.user = data
	console.log(state.user)
}

两个方法提供，一个是改变认证状态，true or false,一个是给user里添加数据。
以改变user为例，在注册完成后我们想让user有数据，

//执行mutation操作 更改state里面的user						
//来到mutation里面执行setUser吧res.data传过去
this.$store.commit("setUser",res.data)

父子组件间通信常使用props或$ emit,对于平行组件之间该方法较麻烦，不利于代码复用，因此使用this.$store.commit
(5)action 分发mutations,mutations是同步的，我们需要异步的，就使用actions来实现对mutations的分发。

export const setIsAuthenticated = ({commit},data)=> {
	commit("setIsAuthenticated",data)//这里的“set..”名字必须和mutation里面的一样 这里就是提交mutation
}

export const setUser = ({commit},data)=> {
	commit("setUser",data)
}

使用：在组件register中axios请求成功之后

this.$store.dispatch('setUser',res.data)

获取Token，请求拦截

获取Token并存在localStorage

我们在制作接口时就已经成功在登录后让其返回一个Token（令牌），我们要拿到这个令牌很简单，axios请求成功后会返回Token我们只要res.data.token就可以拿到令牌了。
我们要把令牌存进localStorage。为我们设置请求拦截做铺垫。

.then（res=>{
//存储token到ls（localStorage）
  		const{token}= res.data
//上面的解构写法等价于 const token = res.data.token
  	window.localStorage.setItem("jwtToken",token)
}）

在登录成功后localStorage中创建jwtToken变量，吧token放进去

设置请求拦截

请求拦截器本段介绍参考自https://blog.csdn.net/YingDaoMonkey/article/details/88062446

请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。

axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么，例如加入token
    .......
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

话不多说直接上代码，在src文件夹下创建新的文件夹util，创建新文件http

import axios from 'axios'

//请求拦截 设置统一的header 因为我们要带着令牌去请求

axios.interceptors.request.use(config=>{
   if(localStorage.jwtToken){
   	config.headers.Authorization = localStorage.jwtToken
   }
   return config;
})

export default axios;

在main.js中把原来axios改成下面这样就可以了。

import axios from './utils/http'

解析token

cd进client下载依赖，
cnpm i jwt-decode
在Login中引入
import jwt_decode from 'jwt-decode';
使用

//解析token 需要做的是就是把我们拿到的token放到jwt_decode里边
	const decoded = jwt_decode(token);
	 console.log(decoded)

通过打印我们可以得到通过解析token得到的数据

总结

我们可以通过Chrome的vue插件进行监测。在没有登录时，state里面false的认证和空的user，