前后端分离项目保留登录状态

1. 整体思路

前后端分离的项目一般会使用token实现登录状态的保持。
在第一次登录时,如果后端验证成功,就可以生成一个随机的token返回给前端
前端在收到返回的token时就可以存储在localStorage或cookieStorage中
下次向后端发送请求时携带上token
后端数据接口会对token进行校验，如果合法则正常响应请求，否则则提示未登录。
前端通过判断本地存储是否存在token判断是否登录

2. 具体实现

vue 拦截和后端JWT框架

2.1 后端JWT框架返回token

[spring集成JWT返回token] https://www.jianshu.com/p/e38a6aafb963

2.2 前端vue请求加token

login.vue文件中登录方法:

 methods:{
            handleLogin(){
                this.$refs.loginForm.validate().then(()=>{
                    this.loading = true;
                    //模拟异步请求后台接口 登录操作
                    setTimeout(()=>{
                        request.post('/login',this.form).then(res=>{
                            if (res.code==='200'){
                                this.$message({
                                    message: '登录成功！',
                                    type: 'success'
                                });
                                //将admin存入cookie, 则个admin中有后端返回的token信息
                                this.$cookie.set('admin',JSON.stringify(res.data));
                                this.$router.push("/")
                            }else {
                                this.$message({
                                    message: res.msg,
                                    type: 'error'
                                });
                            }
                        });
                        this.loading = false;
                    }, 1000)
                }).catch((error=>{
                    this.$message({
                        message: '输入错误！',
                        type: 'warning'
                    });
                }))
            }

在request.js工具类中:

1. 请求拦截器中在请求头中加token
2. 在响应拦截器中, 通过响应码判断是否token失效, 从而跳转到登录页面

import axios from 'axios'
//工具文件中必须手动导入需要使用的组件
import cookies from 'js-cookie'
import router from '@/router'
const request = axios.create({
    baseURL: 'http://localhost:9090/api',  // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！
    timeout: 5000
});

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
     // 设置请求头
    const adminStr = cookies.get("admin");
    if(adminStr !== ""&&adminStr !== undefined){
        const admin = JSON.parse(adminStr) ;
        config.headers['token'] = admin.token;
    }
    return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        //判断token是否 失效, 控制跳转
        if(res.code ==='401'){
            router.push('/login')
        }
        return res;
    },
    error => {
        console.log('err' + error); // for debug
        return Promise.reject(error);
    }
);


export default request