Vue前后端分离使用 Token 登录解决方案

解决方案一（自项目简易写法只用user_id）：

main.js

axios.interceptors.request.use(

config => {

//chun liu start

const userId = axiosCookie.getCookie("user_id");

if (userId) {

//config.headers.cookie = 'user_id='+userId+';secure';

document.cookie = 'user_id=' + userId + ';secure';

}

//chun liu end

return config;

},

err => {

    console.log(err);

return Promise.reject(err);

});

router/index.js

router.beforeEach((to, from, next) => {

if (to.matched.some(res => res.meta.requireAuth)) {// 判断是否需要登录权限

if (axiosCookie.getCookie("user_id")) {// 判断是否登录

next()

} else {// 没登录则跳转到登录界面

next({

path: '/user/login',

query: {redirect: to.fullPath}

})

}

} else {

next()

}

})

登录页面components中请求函数里设置：

self.setCookie('user_id',res.data.data.user_id);

 

解决方案二( 详细写法；包括后端 token的组成方法)：

https://blog.csdn.net/juoduomade/article/details/82025624