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來儲存資料了，這樣每個頁面都可以通過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()

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) 

}}路由守衛

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

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

})

vue 路由守衛 token過期處理

想要實現只有在登入或者註冊成功的狀態下，才能進入系統，這時候就可以使用路由守衛 在route.js中進行配置 import vue from vue import vuerouter from vue router import index from views index.vue import r...

vue處理選單許可權

vue專案處理選單許可權 第一種 後台直接返回選單資料，例如 menulist 資料返回後，直接拿到el menu中去遍歷 個人使用的elementui default active routh router collapse iscollapse class el menu vertical de...

聊聊 OAuth 2 0 的 Token 續期處理

checktokenendpoint.checktoken responsebody public mapchecktoken requestparam token string value if token.i pired 根據 token 查詢儲存的 認證資訊 還有許可權角色等 業務資訊 oau...