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失效的主动介入和被动介入:被动处理 (后端返回一个状态码 ->根据状态码->登出)
主动介入: (登录成功->记录时间戳->用token时先检查时间戳->如果超过时间->登出;
登录模块实现思路: Token作为用户登陆的唯一标识,存储在LocalStorage中,通过Vuex统一管理,并实现持久化。 在axios中设置请求拦截器,在每次请求的请求头中,注入token信息,作为登录的标识。 配合Vue-Router中的beforEach前置导航守卫函数,实现对token信息的统一监测和拦截登录。
主页token访问权限拦截-实现思路:初始化Vuex中的mutations信息,更新用户登录后的信息收集,封装action获取用户资料。封装action,实现用户退出登录,调用commit方法,清除Vuex中保存的token信息。根据后端检测token返回的状态码,设置拦截器,对失效token信息实现拦截登录,并提示用户token失败