Vue專案中實現使用者登入及token驗證

在前後端完全分離的情況下，vue專案中實現token驗證大致思路如下：

1、第一次登入的時候，前端調後端的登陸介面，傳送使用者名稱和密碼

2、後端收到請求，驗證使用者名稱和密碼，驗證成功，就給前端返回乙個token

3、前端拿到token，將token儲存到localstorage和vuex中，並跳轉路由頁面

4、前端每次跳轉路由，就判斷 localstroage 中有無 token ，沒有就跳轉到登入頁面，有則跳轉到對應路由頁面

5、每次調後端介面，都要在請求頭中加token

6、後端判斷請求頭中有無token，有token，就拿到token並驗證token，驗證成功就返回資料，驗證失敗（例如：token過期）就返回401，請求頭中沒有token也返回401

7、如果前端拿到狀態碼為401，就清除token資訊並跳轉到登入頁面

下面說說具體的操作：

一、在store的index.js中新增儲存和刪除token的方法。

二、在login.vue中登入方法呼叫介面成功把token傳給localsortage。

三、在main.js中新增***並且在請求頭中新增token。

1.mutation的方法中增加setsorage和removestorage的方法，為後面的獲取token放在localsortage做準備。

import vue from 'vue'

import vuex from 'vuex'
import  from '@/data/getdata.js'
vue.use(vuex)
const key ='token'
const store =new vuex.store(
},  getters:
return state.token}},
mutations:,
$_removestorage(state)
},})export default store

checklogin()

gologin(mymes).then(res=>)
}else}})
}},

3.main.js中新增***

// the vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import vue from 'vue'
import router from './router'
import elementui from 'element-ui'
import store from  './store'
import 'element-ui/lib/theme-chalk/index.css'
import 'font-awesome/css/font-awesome.css'
/*引入axios外掛程式*/
}})//新增請求***
error=>//登入成功後跳入瀏覽的當前頁面})}
}})new vue()

vue專案實現使用者登入認證

本專案是在node環境下用vue cli3搭建 根目錄下建立server資料夾，用來建立後台api介面 連線資料庫 server db.js module.exports server sql.js var sql book module.exports sql server index.js co...

Django實現使用者登入

今天的文章基於之前做的配置，實現乙個具體的功能demo 登入。在login的templates目錄下建立兩個模板，分別是login.html和home.html，當使用者未登入時，跳轉到login.html頁面，登陸成功或者登入狀態，跳轉到home.html。url的配置主要有兩個，django d...

Session實現使用者登入

前端介面 複製 一 登入驗證 1 將使用者輸入的使用者名稱和密碼與資料庫裡面的使用者名稱密碼進行比對。2 建立user物件，設定使用者名稱和密碼。3 建立session物件，儲存user物件。通過getsession 的setattribute 儲存乙個user物件。4 登入成功，實現頁面跳轉。二 ...