Vue2 0 token許可權處理

token一種身份的驗證，在大多數**中，登入的時候都會攜帶token，去訪問其他頁面，token就想當於一種令牌。可以判斷使用者是否登入狀態。本次頁面是通過element-ui搭建的登入介面

當使用者登入的時候，向後端發起請求的時候，後端會返回給我乙個token，前端可以進行校驗，進行處理token

當前端拿到後端返回的token，可以通過localstorage儲存到本地，然後通過jwt-decode對token進行解析，jwt-decode是一種對token的解析包，通過npm install jwt-decode

設定好儲存方式後，當使用者再次登入的時候，在瀏覽器段可以看點使用者儲存的token。

當頁面很多地方需要用到token的時候，使用者必須攜帶token才能訪問其他頁面，可以通過請求攔截和響應攔截設定，並且在響應攔截的時候處理token是否過時，過期時間是通過後端設定的，前端需要判斷token的狀態碼是否過時就行

import axios from 'axios'
import  from 'element-ui'  //引入了element-ui框架庫
import router from './router/index.js'
let loading;
function startloading() );
}function endloading() 
// 請求攔截
axios.interceptors.request.use(config => 
return config
}, error => )
// 響應攔截
axios.interceptors.response.use(response => , error =>  = error.response;
if(status === 401) 
return promise.reject(error)
})export default axios;

儲存vuex

如果頁面過多，不想資料來回傳遞，這時候就可以用到vuex來儲存資料了，這樣每個頁面都可以通過store獲取使用者資訊了。當使用者拿到token令牌的時候，會得到使用者的資訊，

import vue from 'vue'
import vuex from 'vuex'
vue.use(vuex)
const type = 
const state = 
}const getters = 
const mutations=  else 
},	[type.set_user](state,user)  else 
}	}}const actions = ,isauthorization) => ,
setsuer:(,user) => 
}export const store = new vuex.store()

通過以上vuex設定，我們可以吧得到的token和使用者的一些資訊儲存到vuex中，方便其他頁面進行呼叫

submitform(formname)  = res.data;
//儲存token
localstorage.setitem('eletoken',token)
//解析token
const decode = jwt_decode(token)
console.log(res)
// 儲存到vuex
this.$store.dispatch("setauthorization", !this.isempty(decode));
this.$store.dispatch("setsuer",decode)
// this.$router.push('/index')})}
})},
//封裝的驗證方法
isempty(value)

雖然token和使用者資訊儲存到vuex中了，當我們重新整理瀏覽器的時候，儲存的vuex資料都沒有了，

}}路由守衛

路由跳轉前做一些驗證，比如登入驗證，購物車，是**中的普遍需求，在使用者沒有登入的狀態下，是無法訪問其他頁面的，這是時候我們就可以通過beforeeach來判斷使用者是否登入，(原理不需要細講，官方文件有，直接上**),還是直接通過token去驗證是否登入或者沒有登入狀態

router.beforeeach((to,from,next) =>  else 
})

Vue2 0 token許可權處理

vue 路由守衛 token過期處理

vue處理選單許可權

聊聊 OAuth 2 0 的 Token 續期處理

Vue2 0 token許可權處理

vue 路由守衛 token過期處理

vue處理選單許可權

聊聊 OAuth 2 0 的 Token 續期處理

相關推薦