在vue中，可以用sessionStorage或localStorage來存儲token，也可以用vuex來存儲（但要考慮頁面刷新數(shù)據(jù)消失問題，可以在vuex用Storage），下面介紹用localStorage來存儲token

① login.vue組件中登錄成功后存儲token

login() {this.$axios.post(" **** ", {username: this.username,password: this.$md5(this.password),}).then((res) => {if (res.data.code == 200) {var token = res.data.token;window.localStorage.setItem("token", token);this.$router.push({ path: "/index" });} }); },

② main.js中設置全局請求頭和響應回來的判斷

//設置axios請求頭加入token Axios.interceptors.request.use(config => { if (config.push === '/') { } else { if (localStorage.getItem('token')) { //在請求頭加入token，名字要和后端接收請求頭的token名字一樣 config.headers.token=localStorage.getItem('token'); } } return config; }, error => { return Promise.reject(error);}); //響應回來token是否過期 Axios.interceptors.response.use(response => { //和后端token失效返回碼約定403 if (response.data.code == 403) {// 引用elementui message提示框 ElementUI.Message({ message: '身份已失效', type: 'err' });//清除token localStorage.removeItem('token');//跳轉(zhuǎn) router.push({name: 'login'}); } else { return response } }, error => { return Promise.reject(error); })

③ 在router中的index設置全局守衛(wèi)來判斷是否存在token，不存在就返回登錄頁

router.beforeEach((to, from, next) => { //to到哪兒 from從哪兒離開 next跳轉(zhuǎn) 為空就是放行 if (to.path === '/') {//如果跳轉(zhuǎn)為登錄，就放行 next(); } else {//取出localStorage判斷l(xiāng)et token = localStorage.getItem('token'); if (token == null || token === '') { console.log('請先登錄') next({name: 'login'});} else {next(); } }});

總結

以上是生活随笔為你收集整理的Vue中登录验证成功后保存token,并每次请求携带并验证token操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。