Vue實現使用者登入及token驗證
阿新 • • 發佈:2021-08-25
在前後端完全分離的情況下,專案中實現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資訊並跳轉到登入頁面
vue-cli搭建一個專案,簡單說明前端要做的事:
一、調登入介面成功,在回撥函式中將token儲存到localStorage和vuex中
loginhttp://www.cppcns.com.vue
<template> <div> <input type="text" v-model="loginForm.username" placeholder="使用者名稱"/> <input type="text" v-model="loginForm.password" placeholder="密碼"/> <button @click="login">登入</button> </div> </template> <script> import { mapMutations } from 'vuex'; export default { data () { return { loginForm: { username: '',password: '' },userToken: '' }; },methods: { ...mapMutations(['changeLogin']),login () { let _this = this; if (this.loginForm.username === '' || this.loginForm.password === '') { alert('賬號或密碼不能為空'); } else { this.axios({ method: 'post',url: '/user/login',data: _this.loginForm }).then(res => { console.log(res.data); _this.userToken = 'Bearer ' + res.data.data.body.token; // 將使用者token儲存到vuex中 _this.changeLogin({ Authorization: _this.userToken }); _this.$router.push('/home'); alert('登陸成功'); }).catch(error => { alert('賬號或密碼錯誤'); console.log(error); }); } } } }; </script>
store資料夾下的OhjJdDAJindex.
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { // 儲存token Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : '' },mutations: { // 修改token,並將token存入localStorage changeLogin (state,user) { state.Authorization = user.Authorization; localStorage.setItem('Authorization',user.Authorization); } } }); export default store;
二、路由導航守衛
router資料夾下的indehttp://www.cppcns.comx.js
import Vue from 'vue'; import Router from 'vue-router'; import login from '@/components/login'; import home from '@/components/home'; Vue.use(Router); const router = new Router({ routes: [ { path: '/',redirect: '/login' },{ path: '/login',name: 'login',component: login },{ path: '/home',name: 'home',component: home } ] }); // 導航守衛 // 使用 router.beforeEach 註冊一個全域性前置守衛,判斷使用者是否登陸 router.beforeEach((to,from,next) => { if (to.path === '/login') { next(); } else { let token = localStorage.getItem('Authorization'); if (token === null || token === '') { next('/login'); } else { next(); } } }); export default router;
三、請求頭加token
// 新增請求攔截器,在請求頭中加token axios.interceptors.request.use( config => { if (localStorage.getItemOhjJdDAJ('Authorization')) { config.headers.Authorization = localStoraghttp://www.cppcns.come.getItem('Authorization'); } return config; },error => { return Promise.reject(error); });
四、如果前端拿到狀態碼為401,就清除token資訊並跳轉到登入頁面
localStorage.removeItem('Authorization'); this.$router.push('/login');
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。