1.封裝axios
main.js
import axios from 'axios'
//創(chuàng)建axios實(shí)例
const instance = axios.create({
baseURL: 'ur',
timeout: 1000,
})
// 請求攔截
instance.interceptors.request.use(function (config) {
// 在請求之前做的事
return config
}, function (err) {
// 在請求錯(cuò)誤后做的事
return Promise.reject(err)
});
// 響應(yīng)攔截
let myInterceptors = instance.interceptors.response.use(function (response) {
// 2xx 范圍內(nèi)的狀態(tài)碼都會觸發(fā)該函數(shù)休里。
// 對響應(yīng)數(shù)據(jù)做點(diǎn)什么
return response;
}, function (err) {
// 超出 2xx 范圍的狀態(tài)碼都會觸發(fā)該函數(shù)十性。
// 對響應(yīng)錯(cuò)誤做點(diǎn)什么
return Promise.reject(err);
})
// 移除攔截器
instance.interceptors.response.eject(myInterceptors)
// 判斷請求方式
export function request (type, url, params) {
if (type == 'get') {
return get(url, params)
} else if (type == 'post') {
return post(url, params)
} else if (type == 'put') {
return put(url, params)
}
}
// get請求
function get(url, params) {
return instance.get(url,params)
}
// post請求
function post(url, params) {
return instance.post(url,params)
}
// put請求
function put(url, params) {
return instance.put(url,params)
}
2.將登錄成功之后的token慧库，保存到客戶端的sessionStorage中
原因：為了保證項(xiàng)目中除了登錄之外的其他API接口旺芽，比須在登錄之后才能訪問季稳，而且該token只能在當(dāng)前網(wǎng)站打開期間生效擅这，所以要將token保存在sessionStorage中
login.vue
mounted() {
function login(params) {
return request(
'post',
// 拼接url（這個(gè)看后端傳參需求決定是否要拼接）
`/rqcode/query?uid=${params.uid}`,
{id: 2,
uid:22}.then(res => {
console.log(res);
// 判斷登錄
if(res.status !== 200) {
return this.$message.error('登錄失敗');
}
this.$message.success('登錄成功');
// 生成token
window.sessionStorage.setItem("token",res.data.token)
// 路由跳轉(zhuǎn)
this.$router.push('/home')
})
},
)
};
}
3.掛載路由導(dǎo)航守衛(wèi)，保證只在必須登陸后才能訪問其他頁面
router.js
/ 掛載路由導(dǎo)航守衛(wèi)（寫在路由里面）
router.beforeEach((to, from, next) => {
//判斷是否在登錄頁面
if (to.path === "/login") return next()
// 獲取token
tokenStr = window.sessionStorage.getItem('token')
//判斷是否攜帶token
if(!tokenStr) return next('/login')
})
這篇文章是我在學(xué)習(xí)前端過程中所總結(jié)的登錄流程景鼠，如有不對的地方仲翎，望各位大佬能給出指導(dǎo)意見。
