前端token是什么意思？怎么设置保存？应用场景？实现思路？

token 的意思：

服务端生成的一串字符串，作为客户端进行请求的一个标识。

当用户第一次登录后，服务器生成一个 token 并将此 token 返回给客户端

以后客户端只需带上这个 token 前来请求数据即可，无需再次带上用户名和密码。

简单 token 的组成：

uid（用户唯一的身份标识）

time（当前时间的时间戳）

sign（签名token 的前几位以哈希算法压缩成的一定长度的十六进制字符串。防止 token 泄露）。

怎么统一设置token？

方法一:每次请求的时候手动添加：
axios({
   method: "",
   url: "",
   headers: {
     Authorization:"Bearer token"
   }
})

方法二:使用请求拦截器统一添加(常用)
在axios中设置统一的 token 请求模块
  import axios from axios
//在非组件模块中获取store必须通过这种方式
//这里单独加载store，和在组件中 this.Sstore一个东西
  import store from '@/store/
  const request =axios.create(
    baseURL:http://ttapiresearchitcast.cn/ // 基础路径
  })

// 请求拦截器
  request.interceptors.request.use(function (config)
  const{user}= store.state 
// 如果用户已登录，统一给接设置token信息
  if (user) {
    config.headersAuthorization = Bearer$(user.token)`
  }

//处理完之后一定要把config 返回，否则请求就会停在这里
  return configfunction (error)
  return Promisereject(error)
  })
//响应拦截器
//导出
export default request

***存储token：

把token存储在本地和vuex中

应用场景：登录模块：

token失效的主动介入和被动介入：被动处理 (后端返回一个状态码 ->根据状态码->登出)

主动介入： (登录成功->记录时间戳->用token时先检查时间戳->如果超过时间->登出；

登录模块实现思路： Token作为用户登陆的唯一标识，存储在LocalStorage中，通过Vuex统一管理，并实现持久化。 在axios中设置请求拦截器,在每次请求的请求头中,注入token信息,作为登录的标识。 配合Vue-Router中的beforEach前置导航守卫函数,实现对token信息的统一监测和拦截登录。

主页token访问权限拦截-实现思路：初始化Vuex中的mutations信息，更新用户登录后的信息收集，封装action获取用户资料。封装action，实现用户退出登录，调用commit方法，清除Vuex中保存的token信息。根据后端检测token返回的状态码，设置拦截器，对失效token信息实现拦截登录，并提示用户token失败