在做Vue中的登陸校驗時，思路應(yīng)該是這樣的：先確定一個路由頁面是否需要登陸才能訪問，如果需要，就需要用戶登陸，如果不需要，用戶直接可以訪問。

那么，首先來說，后臺系統(tǒng)中，不一定每一個頁面都要進(jìn)行登陸權(quán)限，所以我們要通過路由的meta標(biāo)簽對需要做校驗的路由頁面做好標(biāo)記，在配置路由時，我們可以在meta屬性中，加入是否需要登陸的字段，如果requireAuth是true，就說明這條路由需要登陸才能訪問：

{path: '/userInfo',name: 'userInfo',meta: {requireAuth: true, // 該路由項需要權(quán)限校驗}component: userInfo }, {path: '/userList',name: 'userList', // 該路由項不需要權(quán)限校驗 component: userInfo }

之后，我們可以定義一個路由守衛(wèi)，每次路由跳轉(zhuǎn)，我們都來做一次權(quán)限校驗，參考如下代碼

router.beforeEach((to, from, next) => {if(to.meta.requireAuth) { // 如果路由項需要權(quán)限校驗/* 從Vuex拿出token碼，說明已登陸（前端的token可偽造，所以這并不是完全靠譜，后面繼續(xù)說）*/if (store.state.token) { next() // 正常跳轉(zhuǎn)頁面} else {next({path: '/login',query: {redirect: to.fullPath} /* 將跳轉(zhuǎn)的路由地址作為參數(shù)帶給登陸頁，登錄成功后跳轉(zhuǎn)回該頁面 */})}} else { // 如果不需要權(quán)限校驗，直接進(jìn)入路由頁面next();} })

如果用戶的Vuex中登陸狀態(tài)（token）存在，就說明登陸了，如果沒有值，就跳轉(zhuǎn)去登陸頁面。用戶在登陸頁面登陸后，要在Vuex中保存登陸狀態(tài)（token）。（實際上如果做持久存儲，還應(yīng)該把登陸狀態(tài)存在localStorage或者cookie中）

然而，單純這么來做并不靠譜，首先，token可以用戶自己偽造，其次，有可能token在前端存在，但是由于登陸時間過長， 已經(jīng)超出登陸最長時效期，這時，后端中，這個token已經(jīng)失效。

所以，這么做權(quán)限校驗并不準(zhǔn)確，那么接下來，我們可以在發(fā)請求的時候，通過后端的一層校驗，進(jìn)一步確保權(quán)限狀態(tài)的準(zhǔn)確性。

這一步，要用到axios里面的攔截器，所以以下代碼建立在項目使用axios的基礎(chǔ)上。axios的攔截器（Interceptors），默認(rèn)配置（axios.defaults）還有 axios.create() 創(chuàng)建出的實例實際上在封裝請求時非常有用，如果你沒接觸過，趕緊到官方文檔看一下！

我們先來看，在每次請求時，我們進(jìn)行如下的攔截，這么做的意思是，如果前端有token，我每次都把token給后端，后端拿到這個token后會到后端再進(jìn)行一次權(quán)限校驗，然后把校驗結(jié)果在接口中反饋：

axios.interceptors.request.use( requestConfig => {if (store.state.token) {config.headers.Authorization = `${store.state.token}`;}return requestConfig; }, err => {return Promise.reject(err); });

然后我們再來看，對應(yīng)一定要再寫一個response攔截器，處理響應(yīng)數(shù)據(jù)。如果后端拿到前端的token，發(fā)現(xiàn)token失效，我們要求后端接口返回401的返回碼，這樣，前端就可以這么處理了：

axios.interceptors.response.use( response => {return response;}, error => {if (error.response) {switch (error.response.status) {case 401: /* 返回 401 表示前端的token已失效當(dāng)然，你也可以和后端也定其他的方式來表示token失效需要前端清除Vuex中的token，頁面跳轉(zhuǎn)到登陸頁*/ store.commit(types.LOGOUT);router.replace({path: 'login',query: {redirect: router.currentRoute.fullPath}})}}return Promise.reject(error.response.data) //返回接口返回的錯誤信息 });

借助axios的攔截器，我們不但前端做了登陸校驗，而且每次請求后端接口的時候，都會攜帶數(shù)據(jù)讓后端再次做登陸校驗，這樣的一個登陸校驗流程就很標(biāo)準(zhǔn)了

?

轉(zhuǎn)載于:https://www.cnblogs.com/binglove/p/10542977.html

總結(jié)

以上是生活随笔為你收集整理的借助axios的拦截器实现Vue.js中登陆状态校验的思路的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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