web——token的使用方法

一、为什么要使用token：
1.token完全有应用管理，它可以避开同源策略。
2.token可以避免CSRF攻击。
3.token可以是无状态的，可以在多个服务间共享。
二、token的作用：
1.防止表单重复提交。
2.身份验证，识别用户权限等。

三、token的基本使用：

使用基于token的身份验证方法，在服务端不需要存储用户的登录记录。大概的流程是这样的：

客户端使用用户名跟密码请求登录

服务端收到请求，验证用户名与密码

验证成功后，服务端会签发一个token，再把这个token发送给客户端

客户端收到token以后可以把它存储起来，比如放在Cookie里或者Local Storage里

客户端每次向服务端请求资源的时候需要带着服务端签发的Token

服务端收到请求，然后去验证客户端请求里面带着的Token，如果验证成功，就向客户端返回请求的数据

四、vue项目中处理token：（也可将token放在vuex中）

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

 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['Authorization'] = token;
      return config
    },
    err=>{
      return Promise.reject(err);
    }
);
//拦截Axios发起的所有请求.
Axios.interceptors.response.use((config)=>{
  return config
});
export default  Axios

五、设置路由拦截使用token

// 二次拦截 当没有token的时候无法访问,避免没有发生请求的时候直接进入页面
// 路由前置导航守卫
// 白名单列表
// 每当路由值发生改变的时候设置路由导航.
const whiteList = ['/login', '/reg']
router.beforeEach((to, from, next) => {
  // to是去哪  from是从哪来  next是放行
  // 先判断是否访问的是有权限的页面
  if (whiteList.includes(to.path)) {
    // 用户访问的是登录或者注册页面 不需要拦截 直接放行
    next()
  } else {
    // 进入else分支说明用户访问的是有权限的页面, 先判断是否有token
    // 如果有token直接放行
    if (localStorage.getItem('token')) {
      next()
    } else {
      // 没有token拦截到登录页面让用户重新登录
      next({ path: '/login' })
    }
  }
})