1. 登錄接口獲得token,通過localStorage.setItem('token',res.data.data.token)將token保存下來
2. 通過localStorage.ge'tItem('token')獲取token,axios添加請求攔截為請求頭添加token
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Page Title</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <div id="app"> <button @click="login">登錄</button> <button @click="islogin">驗證</button> </div> </head> <body> <script> var instance = axios.create({ baseURL: 'http://stuq.ceshiren.com:8089' }); let token = ''; instance.defaults.withCredentials = false; instance.defaults.headers.common['token'] = token; instance.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';//配置請求頭 // 添加請求攔截器 instance.interceptors.request.use(config => { //localStorage.getItem("token") 獲取token的value if (localStorage.getItem('token')) { //將token放到請求頭發送給服務器,將tokenkey放在請求頭中 token=localStorage.getItem('token') console.log(token) config.headers.common['token']=token; } return config; }, error => { return Promise.reject(error); }) var app = new Vue({ el: "#app", methods: { login: function () { //發起請求-登錄 let datainfo={"userName":'demouser','password':'demouser'} instance.post( '/user/login', datainfo ).then(res => { // resolve(res) if(res.data.resultCode==1){ localStorage.setItem('token',res.data.data.token) } }) }, islogin: function () { //驗證登錄是否成功 instance.get( '/user/isLogin' ).then(res => { // resolve(res) return res.data }) } } }) </script> </body> </html>
響應結果：
