vue项目将token存在(vuex)store和localstorage中
文章目錄
- 一、準備工作和token
- 1、準備工作
- 2、介紹token用法
- 二、創建storage,store,request
- 1、src目錄:
- 2、封裝storage(可選)
- 3、創建store
- 4、創建request
- 三、配置代理,封裝路由router、設置路由守衛,在main.js中引入router、store
- 一、配置代理
- 二、封裝路由router,并設置路由守衛
- 三、在main.js中引入router、store
- 四、登錄頁面實際使用
適合小白 ?
一、準備工作和token
1、準備工作
-
了解(session,cookie)token
Token的引入:Token是在客戶端頻繁向服務端請求數據,服務端頻繁的去數據庫查詢用戶名和密碼并進行對比,判斷用戶名和密碼正確與否,并作出相應提示,在這樣的背景下,Token便應運而生。
token 是在服務端產生的一串字符串,以作客戶端進行請求的一個令牌。如果前端使用用戶名/密碼向服務端請求認證,服務端認證成功,那么在服務端會返回 Token 給前端。前端可以在每次請求的時候帶上 Token 證明自己的合法地位。如果這個 Token 在服務端持久化(比如存入數據庫),那它就是一個永久的身份令牌(除非設置了有效期)。 -
token 優點
Token 完全由應用管理,所以它可以避開同源策略
Token 可以避免 CSRF 攻擊
Token 可以是無狀態的,可以在多個服務間共享
減輕服務器的壓力,減少頻繁的查詢數據庫,使服務器更加健壯。 -
安裝vuex
cnpm install vuex --save
2、介紹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信息并跳轉到登錄頁面
————————————————
版權聲明:本文為CSDN博主「sleepwalker_1992」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/sleepwalker_1992/article/details/82974703
二、創建storage,store,request
1、src目錄:
注:
- 封裝storage是可選的,不封裝就用原生的唄;創建store是必須的!
- token一定要存在storage緩存中,否則刷新一下,store會重新被加載,token就沒了;
- 那存在store是不是多余了,這個也是為了數據統一管理吧,也是數據可視化,因為緩存中的數據代碼中是看不見的~
2、封裝storage(可選)
// 封裝操作localstorage本地存儲的方法 模塊化var storage = {set(key, value) {localStorage.setItem(key, JSON.stringify(value));// localStorage.key = value;// localStorage[key] = value;},get(key) {return JSON.parse(localStorage.getItem(key));},getForIndex(index) {return localStorage.key(index);},getKeys(){let items = this.getAll();let keys = [];for (let index=0;index<items.length;index++){keys.push(items[index].key);}return keys;},getLength() {return localStorage.length;},getSupport() {return (typeof (Storage) !== "undefined") ? true : false;},remove(key) {localStorage.removeItem(key);},removeAll() {localStorage.clear();},getAll() {let len = localStorage.length; // 獲取長度let arr = new Array(); // 定義數據集for (var i = 0; i < len; i++) {// 獲取key 索引從0開始var getKey = localStorage.key(i);// 獲取key對應的值var getVal = localStorage.getItem(getKey);// 放進數組arr[i] = {'key': getKey,'val': getVal,}}return arr;} }export default storage;3、創建store
import Vue from 'vue' import Vuex from 'vuex' import storage from '@/model/storage'Vue.use(Vuex); // 用Vuex.Store對象用來記錄token const store = new Vuex.Store({state: {// 存儲tokentoken:"",userName:"" // 可選},const getters = {getToken(state){return state.token || storage.get("token") || null;} }// 計算屬性mutations: {// 修改token,并將token存入localStoragesetToken(state,token) {state.token = token;storage.set('token', token);console.log('store、localstorage保存token成功!');},delToken(state) {state.token = "";storage.remove("token");},// 可選setUserInfo(state, userName) {state.userName = userName;}} });actions: {// removeToken: (context) => {// context.commit('setToken')// }},export default store;4、創建request
import axios from 'axios' import store from '@/store' import router from '@/router'// create an axios instance const service = axios.create({// index.js設置了代理(解決跨域) invoice = http://58.246.79.142:25005baseURL: "/invoice", // url = base url + request urltimeout: 5000, // request timeout })//添加請求攔截器,若token存在則在請求頭中加token,不存在也繼續請求 service.interceptors.request.use(config => {// 每次發送請求之前檢測都vuex存有token,那么都要放在請求頭發送給服務器,沒有則不帶token// Authorization是根據后端自定義字段config.headers.Authorization = store.getters.getToken;return config;},error => {console.log("在request攔截器顯示錯誤:", error.response)return Promise.reject(error);} );//respone攔截器 service.interceptors.response.use(response => {// 在status正確的情況下,code不正確則返回對應的錯誤信息(后臺自定義為200是正確,并且將錯誤信息寫在message),正確則返回響應return response.data.code == 200 ? response : Promise.reject(response.data.message);},error => { // 在status不正確的情況下,判別status狀態碼給出對應響應if (error.response) {console.log("在respone攔截器顯示錯誤:", error.response)switch (error.response.status) {case 401://可能是token過期,清除它store.commit("delToken");router.replace({ //跳轉到登錄頁面path: '/login',// 將跳轉的路由path作為參數,登錄成功后跳轉到該路由query: { redirect: router.currentRoute.fullPath }});}}return Promise.reject(error.response.data);} );export default service三、配置代理,封裝路由router、設置路由守衛,在main.js中引入router、store
一、配置代理
二、封裝路由router,并設置路由守衛
/* eslint-disable */ import Vue from 'vue' import Router from 'vue-router' import Main from '@/main/index'import store from '@/store' import storage from '@/model/storage'Vue.use(Router)const routes = [{path: '/',name: 'Main',redirect: '/login',// 某些頁面規定必須登錄后才能查看 ,可以在router中配置meta,將需要登錄的requireAuth設為true,meta: {requireAuth: true,}},{path: '/login',component: () => import('@/views/login'),},{path: '/invoice',redirect: '/invoice',component: Main,},]},{path: '*',component: Main} ]const router = new Router({ routes: routes })// 設置路由守衛,在進頁面之前,判斷有token,才進入頁面,否則返回登錄頁面 if (storage.get("token")) {store.commit("setToken", storage.get("token")); } router.beforeEach((to, from, next) => {// 判斷要去的路由有沒有requiresAuth// to.matched.some(r => r.meta.requireAuth) or to.meta.requiresAuthif (to.matched.some(r => r.meta.requireAuth)) {if (store.state.token) {next(); //有token,進行request請求,后臺還會驗證token} else {next({path: "/login",// 將剛剛要去的路由path(卻無權限)作為參數,方便登錄成功后直接跳轉到該路由,這要進一步在登陸頁面判斷query: { redirect: to.fullPath } });}} else {next(); //如果無需token,那么隨它去吧} });export default router三、在main.js中引入router、store
import Vue from 'vue' import App from './App' import router from './router'import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css' import store from '@/store'// 兼容ie // import 'babel-polyfill';Vue.use(ElementUI); Vue.config.productionTip = falsenew Vue({el: '#app',router:router,store,components: { App },template: '<App/>' })四、登錄頁面實際使用
只給出表單提交示例函數和依賴js
import { postLogin } from "@/api/login";submitForm(formName) {this.$refs[formName].validate(valid => {if (valid) {let that = this;// console.log('username',this.loginForm.username)// 通過校驗規則后進入校驗用戶名密碼是否正確// 沒有后臺接口可以自定義一個函數來模擬,替換postLoginpostLogin(this.loginForm.username, this.loginForm.password).then(res => {console.log(res);that.$store.commit("setToken", res.data.token);that.$store.commit("setUserInfo", res.data.account);this.$notify({title: "登錄成功",type: "success",showClose: false,duration: 1000});setTimeout(() => {// 此時要判斷/login后面的參數,若無參數,進入主頁;this.$router.push("/index");// 若有參數則參數為未有權限的那個路由,跳轉到那個路由// this.$router.push(***); -- 具體要自己在這實現}, 1000);}).catch(error => {// 錯誤分為 status-請求錯誤 和 code-賬號密碼錯誤this.$message.error(error);console.log(error);});} else {// 不符合前端校驗this.$message.error('format error:'+error);console.log('format error:',error);return false;}});}上面依賴的@/api/login:
import request from '@/utils/request.js' // 前面封裝的request // 在request中,設置了根路徑/invoice,所以每一個請求都會自動在前面帶上invoice; // 由于在config中的index配置過了代理(監聽)的路徑也是/invoice,但凡遇到/invoice路徑就會替換為target目標地址(后臺接口根地址) // 實現跨域,即不限于只能訪問根路徑為127.0.0.1下的地址 export function postLogin(account,password) {console.log(account,password)return request({url: '/login',method: 'post',params:{// 具體傳參(鍵)要看后臺要求account:account,password:password}}) }總結
以上是生活随笔為你收集整理的vue项目将token存在(vuex)store和localstorage中的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: js 实现拖拽滚动
- 下一篇: Vue使用Vuex一步步封装并使用sto