vue結合axios登入攔截新增token

1.首先登入之前需要用到全域性的前置守衛（防止輸入路由直接登入）

// 根據自己習慣，可以在main.js也可以

import vue from
'vue'
import vuerouter from
'vue-router'
vue.
use(vuerouter)
const
mylogin=(
)=>
import
('../views/login'
)// 此類寫法懶載入
const
otherpage=(
)=>
import
('../views/otherpage'
)const
indexme=(
)=>
import
('../views/index'
)const routes =[,
,},]
const router =
newvuerouter()
// 這三個一定要注意 是to,from,next 全域性前置守衛
router.
beforeeach
((to,
from
,next)
=>
else
// 將跳轉的路由path作為引數，登入成功後跳轉到該路由})
}}else
// 第二種 直接登入
if(to.path ===
'/mylogin')if
(!sessionstorage.
getitem
('token'
)&& to.path !=
'/mylogin'))
}else})
export
default router

import vue from

"vue"
;import axios from
"axios"
;import qs from
"qs"
;//序列化字串
vue.prototype.$axios = axios;
vue.prototype.$qs = qs;
const url =
"";// const url = " || 2 "; // 如果存在第乙個就用第乙個，如果沒有就執行第二個
// 匯出封裝好的axios
export
function
request
(config));
// 2、axios的請求***
instance.interceptors.request.
use(
req =>`;
} console.
log(req)
return req;},
err =>);
// 3、axios的響應***
instance.interceptors.response.
use(
res =>
,500);
return res.data;},
err =>);
return
instance
(config)
;}

// 首先匯入封裝好的request.js檔案

import
from
"./request"
;// 我是根據每個路由建立乙個統一請求介面函式，到時候直接匯入使用即可
export
function
getproductdetail()
, params:,}
});}

4.然後在其請求函式直接使用即可

import

from
'../network/requestone'
// 匯入封裝的函式
export
default},
// 存放 方法
methods:)}
)}},
}

vue結合axios傳遞引數

首先要安裝好axios import axios from axios 匯入axios export default args testinte ce args 把form表單轉json格式 function fromjson json vue中方法 methods else testfun2 cf...

vue登入許可權實現 登入攔截

用sessionstorage實現，資料夾結構如下 關鍵部分如下 import vue from vue import router from vue router import index from components index import login from components log...

vue中axios請求攔截 響應攔截的配置

1.在vue專案的 src 資料夾下新建乙個資料夾為 plugins，然後在 plugins 下新建 axios.js 檔案，寫入如下 import axios from axios import from router config import from config import from i...