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

① login.vue組件中登錄成功后存儲(chǔ)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中設(shè)置全局請(qǐng)求頭和響應(yīng)回來(lái)的判斷

//設(shè)置axios請(qǐng)求頭加入token Axios.interceptors.request.use(config => { if (config.push === '/') { } else { if (localStorage.getItem('token')) { //在請(qǐng)求頭加入token，名字要和后端接收請(qǐng)求頭的token名字一樣 config.headers.token=localStorage.getItem('token'); } } return config; }, error => { return Promise.reject(error);}); //響應(yīng)回來(lái)token是否過(guò)期 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設(shè)置全局守衛(wèi)來(lái)判斷是否存在token，不存在就返回登錄頁(yè)

router.beforeEach((to, from, next) => { //to到哪兒 from從哪兒離開(kāi) 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('請(qǐng)先登錄') next({name: 'login'});} else {next(); } }});

總結(jié)

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

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