vue登錄以及權(quán)限驗(yàn)證相關(guān)的實(shí)現(xiàn)
關(guān)鍵詞:前后端分離、jwt、登錄、權(quán)限驗(yàn)證
最近在做一個小應(yīng)用,需要用到vue實(shí)現(xiàn)登錄,以及給不同路由設(shè)置權(quán)限。在網(wǎng)上看了很多文章,講的是亂七八糟。感嘆國內(nèi)技術(shù)類文章實(shí)在是差勁,抄來抄去。這篇文章就說說我最后是如何實(shí)現(xiàn)的。
前后端分離項(xiàng)目中,后端提供api接口給前端,使用jwt發(fā)放權(quán)限。
首先前端提供用戶名和密碼請求登錄接口,后端驗(yàn)證之后返回給前端一個token,之后前端在請求需要權(quán)限的接口時攜帶這個token就可以了。
兩個問題
現(xiàn)在面臨兩個問題,
首先vue中不同的路由有不同的權(quán)限,比如我要訪問后臺 /admin, 就需要先登錄才行,而有的頁面不需要登錄。
第二個問題是,vue組件中使用axios請求后臺服務(wù)時,不同的接口有不同的權(quán)限。
后端接口權(quán)限
先來解決第二個問題。vue不同組件都要用到axios,我們在全局為axios添加request和response的攔截器。
也就是,在發(fā)起請求之前,先檢測header是否攜帶token信息。在接收響應(yīng)之前,先查看后端返回狀態(tài)碼,如果說需要token驗(yàn)證就跳轉(zhuǎn)到登錄界面。
在main.js添加如下,或者新增一個http.js文件:
// * http request 攔截器 axios.interceptors.request.use( config => { // * 判斷是否存在token,如果存在的話,則每個http header都加上token // * token會在登錄之后存儲在本地 if (localStorage.token) { config.headers["Authorization"] = `Bearer ${localStorage.token}`; } return config; }, err => { return Promise.reject(err); }); // * http response 攔截器 axios.interceptors.response.use( response => { let data = response.data; // * 正常返回數(shù)據(jù) if (data.code === 0) { // * 返回data return data } // * 如果code是20103 表示token未認(rèn)證(后端定義的錯誤碼) // * 跳轉(zhuǎn)到login if (data.code === 20103) { router.replace('/login') } return Promise.reject(data); }, error => { return Promise.reject(error); }); Vue.prototype.$http = axios;
現(xiàn)在發(fā)起的任何請求之前都會檢查是否攜帶token,如果沒有就跳到login界面。
在login中,攜帶用戶名和密碼獲取token之后,存放到本地。
login.vue:
axios.post('/api/login', { email: this.email, password: this.password }) .then((res) => { // * 存儲token localStorage.setItem('token', res.data.token); console.info("login successful"); // * 跳轉(zhuǎn)回登錄前頁面 this.$router.push({path: this.$route.query.redirect || '/admin',}) }).catch((error) => { console.error(error) });
前端vue路由權(quán)限
現(xiàn)在,訪問后端接口的權(quán)限問題解決了。但是在vue中我不同的頁面有不同的訪問權(quán)限該如何處理?vue-router官方文檔給出了例子:
在需要權(quán)限的路由添加meta信息,表明該路由需要登錄才能訪問,然后在所有路由跳轉(zhuǎn)之前添加處理函數(shù),如果沒有auth,跳轉(zhuǎn)到登錄:
path: '/admin', name: 'admin', component: () => import('../views/admin/Admin.vue'), // * 需要登錄才能訪問 meta: {requiresAuth: true},
// * 全局鉤子 router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { // * 對于需要auth的路徑 // * 沒有token信息,redirect to login if (!localStorage.token) { next({ path: '/login', query: {redirect: to.fullPath} }) } else { next() } } else { next() // 確保一定要調(diào)用 next() } })
登出的話,清除token信息即可。
localStorage.removeItem("token")
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
解決Vue+Element ui開發(fā)中碰到的IE問題
今天小編就為大家分享一篇解決Vue+Element ui開發(fā)中碰到的IE問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue+tsc+noEmit導(dǎo)致打包報TS類型錯誤問題及解決方法
當(dāng)我們新建vue3項(xiàng)目,package.json文件會自動給我添加一些配置選項(xiàng),這寫選項(xiàng)基本沒有問題,但是在實(shí)際操作過程中,當(dāng)項(xiàng)目越來越復(fù)雜就會出現(xiàn)問題,本文給大家分享vue+tsc+noEmit導(dǎo)致打包報TS類型錯誤問題及解決方法,感興趣的朋友一起看看吧2023-10-10淺談mvvm-simple雙向綁定簡單實(shí)現(xiàn)
本篇文章主要介紹了淺談mvvm-simple雙向綁定簡單實(shí)現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04基于VuePress 輕量級靜態(tài)網(wǎng)站生成器的實(shí)現(xiàn)方法
VuePress是一個基于Vue的輕量級靜態(tài)網(wǎng)站生成器以及為編寫技術(shù)文檔而優(yōu)化的默認(rèn)主題。這么文章給大家詳細(xì)介紹了vuepress 靜態(tài)網(wǎng)站生成器的方法,需要的朋友參考下吧2018-04-04解決vue組件銷毀之后計時器繼續(xù)執(zhí)行的問題
這篇文章主要介紹了解決vue組件銷毀之后計時器繼續(xù)執(zhí)行的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07基于Vue實(shí)現(xiàn)一個textarea幽靈建議功能
不知道你有沒有發(fā)現(xiàn)Bing AI聊天有個輸入提示功能,在用戶輸入部分內(nèi)容時后面會給出灰色提示文案,用戶只要按下tab鍵就可以快速添加提示的后續(xù)內(nèi)容,我將這個功能稱為幽靈建議,接下來我將用Vue框架來實(shí)現(xiàn)這個功能,需要的朋友可以參考下2023-09-09在Vue3中使用localStorage保存數(shù)據(jù)的流程步驟
在前端開發(fā)中,尤其是利用Vue3構(gòu)建現(xiàn)代Web應(yīng)用時,掌握如何使用本地存儲(localStorage)來保存數(shù)據(jù)是非常重要的能力,在這篇博客中,我將詳細(xì)介紹如何在Vue3中使用localStorage保存數(shù)據(jù),并提供示例代碼來幫助理解,需要的朋友可以參考下2024-06-06