在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下:
1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码
2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token
3、前端拿到token,将token存储到localStorage/cookie 和vuex中,并跳转路由页面
vuex 存不存都无所谓,个人感觉这里只为了store管理好看点而已。
4、前端每次跳转路由,就判断 localStroage/cookie 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面
5、每次调后端接口,都要在请求头中加token
service.interceptors.request.use(
config => {
// do something before request is sent
if (store.getters.token) {
config.headers['X-Token'] = getToken()
}
return config
},
error => {
return Promise.reject(error)
}
)