token的使用

一.为什么要使用token
1.token完全有应用管理，它可以避开同源策略
2.token可以避免CSRF攻击
3.token可以是无状态的，可以在多个服务间共享
二.token的作用
1.防止表单重复提交
2.身份验证
三.token身份验证的使用-----前端
大概流程：
1.客户端使用用户名跟密码请求登录
2.服务端收到请求，去验证用户名与密码
验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端
3.客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里
客户端每次向服务端请求资源的时候需要带着服务端签发的 Token
4.服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据

5.前端使用token
(1).在验证登录成功之后，将服务端返回来的token值存储到sessionStorage中。代码如下：

 Axios.post(Api.user.userLogin,
                {mgr_name:name,mgr_pwd:pwd}
                ).then((res)=>{
                console.log(res)
                if(res.status == 200){
                    if(res.data.code===200){
                        console.log('返回来的数据',res.data.data)
                        this.user = res.data.data;
                        this.token = res.data.token;
                        sessionStorage.setItem('token',JSON.stringify(res.data.data.token))
                        sessionStorage.setItem('user',JSON.stringify(res.data.data))
                        resolve('登录成功')
                    }else if(res.data.code===500){
                        message.error(res.data.msg)
                        reject('登录失败')
                    }
                }

            }).catch((err)=>{
                console.log('报错')
                console.log(err)
            })
        })

(2)当客户端向服务端发起请求时，在请求头中加入服务端返回来的token值，本文设置一个axios的拦截器，在该拦截器中设置token，这样就可以不用在每次发起请求的时候，在请求头中加token值
代码如下：

import Axios from 'axios'
Axios.defaults.baseURL= '/api'
Axios.defaults.headers.post["Content-Type"]="application/json"
// 拦截Axios发起的所有请求
Axios.interceptors.request.use(
    config=>{
      const token = window.sessionStorage.getItem("token")
      config.headers["token"] = token;
      return config
    },
    err=>{
      return Promise.reject(err);
    }
);
//拦截Axios发起的所有请求.
Axios.interceptors.response.use((config)=>{
  return config
});
export default  Axios