token驗證機制

驗證過程：

• 首次登錄時，后端服務器判斷用戶賬號密碼正確之后，根據用戶id、用戶名、定義好的秘鑰、過期時間生成 token ，返回給前端；
• 前端拿到后端返回的 token ,存儲在 localStroage 和 Vuex 里；
• 前端每次路由跳轉，判斷 localStroage 有無 token ，沒有則跳轉到登錄頁，有則請求獲取用戶信息，改變登錄狀態；
• 每次請求接口，在 Axios 請求頭里攜帶 token;
• 后端接口判斷請求頭有無 token，沒有或者 token 過期，返回401；
• 前端得到 401 狀態碼，重定向到登錄頁面

在vue-cli項目實現登錄的過程中用到了token驗證，總結如下：

1. 客戶端以用戶名與密碼為參數請求登錄API
2. 服務端收到登錄請求去驗證用戶名與密碼
3. 驗證通過,服務端會生成Token,再把這個Token響應給客戶端.
4. 客戶端收到Token,存儲到本地,如Cookie,SessionStorage,LocalStorage.我們選擇了cookie
5. 客戶端每次向服務器請求API接口時,都要帶上Token.可以和后端協定，傳參數還是headers
6. 客戶端每次跳轉路由的時候也要驗證Token登錄態
7. 服務端收到請求,驗證Token,如果通過就返回數據,否則返回錯誤狀態，客戶端依次去處理

第一步：通過用戶名+密碼獲取token，存cookie

axios.post(this.Service.SERVER.login, {
    username: this.ruleForm.username,
    password: this.ruleForm.password
})
.then((res) => {
    if(res.token) {
        this.xes.setCookies('token', res.token, 2)
        this.$router.push({name: 'approveOnline'})
    }
})

 

第二步：路由跳轉進行登錄態校驗

首先先比較一下下面兩段代碼

router.beforeEach((to, from, next) => {
    let isLogin = xes.getCookies('token')
    if(!isLogin) {
         // 如果是登錄頁面路徑，就直接跳下一步
         next('/login');
    }else{
         next()
    }
})

 

router.beforeEach((to, from, next) => {
    let isLogin = xes.getCookies('token')
    if(!isLogin) {
        // 如果是登錄頁面路徑，就直接跳下一步
        if(to.path=='/login'){
            next();
        }else {
            next('/login');
        }
    }else{
      next()
    }
})

 

結果：第一段代碼在頁面進行路由跳轉的時候會陷入死循環
原因：next后面帶路徑跳轉時會重新調用router.beforeEach，next后不加參數跳轉時不會執行beforeEach

 

 

第三步：axios請求攔截器配置token，校驗請求時的登錄態

axios.interceptors.request.use((config) => {
    // 以防cookie失效，所以每次發請求都重新獲取token
    if(xes.getCookies('token')) {
        config.headers.common['Authorization'] = 'Token ' + xes.getCookies('token');
    }
    return config
}, (error) => {
    Message.error({
        message: '加載超時'
    })
    return Promise.reject(error)
})

axios請求頭部token的設置——因為axios.defaults.headers設置只在頁面初始化的時候獲取一次，會導致在頁面發起請求的時候不會重新去獲取登陸態，
這樣就出現個問題，不論是否處於登陸態，已登陸的狀態會一直存在，
為了避免這個問題，就需要在請求內部去設置獲取token，於是把攜帶token的頭部設置放在axios的請求攔截器里，每次請求都重新獲取以便拿到最新的登陸態，
這里有個坑就是在請求攔截器里設置頭部要用自定義設置，而不能用axios.defaults.headers默認設置，
因為默認設置是優先於請求攔截器執行的，假如用了默認設置，其實設置的是下一次請求的請求頭而非本次請求（token是在axios.defaults.headers中攜帶的）

第四步：axios響應攔截器更新cookie

axios.interceptors.response.use((res) => {
    var _url = res.config.url.replace(axios.defaults.baseURL, '')
    if (res.data.stat == 1) {
        xes.setCookies('token', xes.getCookies('token'), 2)
    }
    return res.data
}

這樣做是考慮到用戶體驗，防止用戶在使用系統過程中由於cookie到期而中斷退出系統

 

參考地址：http://www.yyyweb.com/5144.html