对前端来说token代表了什么_前后端分离：使用 token 登录解决方案

这篇文章写一下前后端分离下的登录解决方案，目前大多数都采用请求头携带 Token 的形式。

开写之前先捋一下整理思路：

首次登录时，后端服务器判断用户账号密码正确之后，根据用户id、用户名、定义好的秘钥、过期时间生成 token ，返回给前端；

前端拿到后端返回的 token ,存储在 localStroage 和 Vuex 里；

前端每次路由跳转，判断 localStroage 有无 token ，没有则跳转到登录页，有则请求获取用户信息，改变登录状态；

每次请求接口，在 Axios 请求头里携带 token;

后端接口判断请求头有无 token，没有或者 token 过期，返回401；

前端得到 401 状态码，重定向到登录页面。

我这里前端使用 Vue ，地址：vue-token-login

后端使用阿里的 egg，地址：egg-token-login

首先，我们先轻微封装一下 Axios:

我把 Token 存在localStroage，检查有无 Token ，每次请求在 Axios 请求头上进行携带

if (window.localStorage.getItem('token')) {

Axios.defaults.headers.common['Authorization'] = `Bearer ` + window.localStorage.getItem('token')

}

复制代码

使用 respone 拦截器，对 2xx 状态码以外的结果进行拦截。

如果状态码是401，则有可能是 Token 过期，跳转到登录页。

instance.interceptors.response.use(

response => {

return response

},

error => {

if (error.response) {

switch (error.response.status) {

case 401:

router.replace({

path: 'login',

query: { redirect: router.currentRoute.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由

})

}

}

return Promise.reject(error.response)

}

)

复制代码

定义路由：

const router = new Router({

mode: 'history',

routes: [

{

path: '/',

name: 'Index',