前后端分离

前后端分离使用 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 请求头上进行携带,封装request.js组件，

//引入axios
import axios from "axios";

//axios.create可以帮助我们创建一个实力对象(其实他所创建的这个实力对象就是axios对象)
//创建实例 
    const request = axios.create({
    // baseURL : "/dev-api",
    baseURL : process.env.VUE_APP_BASE_API, 
    timeout : 5000, //请求超时时间
});


//添加拦截器
//请求拦截
request.interceptors.request.use(config=>{
    // 在发送请求之前做些什么
    return config;
},error=>{
     // 对请求错误做些什么
    return Promise.reject(error);
})

    //响应拦截
request.interceptors.response.use(response=>{
    // 在响应成功之前做些什么
    return response;
},error=>{
    // 对响应失败做些什么
    return Promise.reject(error);
})


        //导出request对象
    export default request;
复制代码
然后是接口单独在封装一个接口，
import request from "../utils/request"
export default {
    //登录接口
login(mobile,password){
    return request({
        url : "/user/login", 
        method : "post",
        data : {
            mobile,
            password,
        }
    })
},
//获取用户信息接口
getInfo(token){
    return request({
        method : "get",
        url : `/user/info/${token}`,
    })
}
}
复制代码
定义路由
 const router = new Router({
mode: 'history',
routes: [
{
  path: '/',
  name: 'Index',
  component: Index,
  meta: {
    requiresAuth: true
  }
},
{
  path: '/login',
  name: 'Login',
  component: Login
}
]
上面我给首页路由加了 requiresAuth，所以使用路由钩子来拦截导航，localStroage 里有 Token ，就调用获取 userInfo 的方法，并继续执行，如果没有 Token ，调用退出登录的方法，重定向到登录页。})
复制代码
Vuex
首先，在 mutation_types 里定义：
然后在 mutation 里使用它们：
在之前封装 Axios 的 JS里定义请求接口：
在 Vuex 的 actions 里引入：
定义 action
总结
访问登录注册之外的路由，都需要登录权限，比如首页，判断有无token，有则访问成功，没有则跳转到登录页面；
成功登录之后，跳转到之前重定向过来的页面；
token 过期后，请求接口时，身份过期，跳转到登录页，继续第二步；这一步主要用了可以做7天自动登录等功能。