下图是分析token的工作过程：
先实现登录验证和token值的存储
那仿的一个电商管理平台的代码来举例： 项目用到了vue、vue-cli、axios、element-ui 在表单的登陆区域如下所示，因为配置了:rule的验证规则，所以点击登录之后，要对输入的数据进行预验证。
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" label-width="0px"
class="login-form">
<!-- 用户名 -->
<el-form-item prop="username">
<el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item prop="password">
<el-input v-model="loginForm.password" type="password"
prefix-icon="iconfont icon-lock_fill">
</el-input>
</el-form-item>
<el-form-item class="btn">
<el-button type="primary" @click="login">登录</el-button>
<el-button type="info" @click="reset">重置</el-button>
</el-form-item>
</el-form>
因为对表单数据进行预验证，所以要拿到表单数据,如下通过$refs拿到对应的表单，然后通过validate进行预验证，参数是一个回调函数；回调函数能够拿到预验证的结果valid,valid是个布尔值，true是预验证成功，false是预验证失败。 如果预验证失败就返回，如果预验证成功就发送axios请求，请求数据。
login() {
this.$refs.loginRef.validate(async (valid) => {
if (!valid) return;
const { data: res } = await this.$http.post('login', this.loginForm);
// console.log(res);
// 设置提示信息，弹窗提示是成功还是失败
if (res.meta.status !== 200) this.$message.error('登录失败！');
else { this.$message.success('登录成功'); }
// 1、将成功之后的token，保存到客户端sessionStorage中
// 1、1 项目中除了登录之外的其他API，必须在登陆之后才能够访问
// 1、2 token 只能在当前网页打开期间生效，所以将token保存在sessionStorage中
window.sessionStorage.setItem('token', res.data.token);
// 2、通过编程式导航跳转到后台主页，路由地址是/home
this.$router.push('/home');
});
}
请求数据的过程就是上面图中的过程，将数据发送给服务器进行登录验证，服务器返回的数据里面包含一个token值，客户端需要将这个token值给存储起来。这就涉及到了客户端将可以将数据存储在哪？cookie、sessionstorage、localstorage。
在这里选择存储在sessionstorage,因为sessionstorage的存储时间是有时间限制的，当会话结束的时候，存储会被清空。页面会话在浏览器打开期间一直保持，并且重新加载或者恢复页面时仍会保持原来的页面会话。
通过sessionStorage.setItem()将token值存储起来。
这样在SPA页面中，只有有token值才能从登录页面跳转到其他页面，可以通过前置路由守卫来实现，如果有token值就放行，没有token值就跳转(to)到登录页面重新登录。
以上便实现了1、发送登录请求；2、服务器验证并返回token值；3、客户端存储token值(存到sessionstorage中)
发送请求时携带token值,让服务器进行验证
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/';
// 在挂载到原型对象之前给他设置一个拦截器
axios.interceptors.request.use(config=>{
// console.log(config)
config.headers.Authorization = window.sessionStorage.getItem('token');
return config
})
Vue.prototype.$http = axios;
在配置axios的时候，给他加一个请求拦截器，在发送请求之前给请求头中的authorization项添加token(从sessionstorage里面获取)，这样请求中就携带token值了。
