vuex + axios 做登入驗證 並且儲存登入狀態
還是那句話,網上找個完整的部落格真的難,實現效果全靠摸索啊
第一步:安裝axios 、vuex npm i -s axios npm i -s vuex 執行這兩句 ,vue等環境搭建就不廢話了
第二步:配置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 App from './App' import router from './router' import iView from 'iview'; import 'iview/dist/styles/iview.css'; import locale from 'iview/dist/locale/en-US'; import VueParticles from 'vue-particles'; import axios from 'axios' ; import Vuex from 'vuex' //引入狀態管理 Vue.use(VueParticles) ; Vue.use(iView, { locale }); Vue.config.productionTip = false ; Vue.prototype.$http = axios ; Vue.use(Vuex) ; const ADD_COUNT = 'ADD_COUNT'; // 用常量代替事件型別,使得程式碼更清晰 const REMOVE_COUNT = 'REMOVE_COUNT'; //註冊狀態管理全域性引數 var store = new Vuex.Store({ state:{ token:'', userID:'', }, mutations: { //寫法與getters相類似 //元件想要對於vuex 中的資料進行的處理 //元件中採用this.$store.commit('方法名') 的方式呼叫,實現充分解耦 //內部操作必須在此刻完成(同步) [ADD_COUNT] (state, token) { // 第一個引數為 state 用於變更狀態 登入 sessionStorage.setItem("token", token); state.token = token; }, [REMOVE_COUNT] (state, token) { // 退出登入 sessionStorage.removeItem("token", token); state.token = token; }, } }); router.beforeEach((to, from, next) => { iView.LoadingBar.start();//loadong 效果 store.state.token = sessionStorage.getItem('token');//獲取本地儲存的token if (to.meta.requireAuth) { // 判斷該路由是否需要登入許可權 if (store.state.token !== "") { // 通過vuex state獲取當前的token是否存 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 將跳轉的路由path作為引數,登入成功後跳轉到該路由 }) } } else { next(); } }) router.afterEach(route => { iView.LoadingBar.finish(); }); /* eslint-disable no-new */ new Vue({ el: '#app', router, store, //註冊元件 components: { App }, template: '<App/>' }) ;
第三步:進行登入 操作,呼叫main.js 中定義好的修改token的方法[ADD_COUNT]
附上請求部分程式碼
this.$http({ method: 'get', url: '/api/login', }).then(function(res){ var json = res.data console.log(json.data); this.$Message.success('Success!'); this.$store.commit('ADD_COUNT', json.data.token); let clock = window.setInterval(() => { this.totalTime-- ; if (this.totalTime < 0) { window.clearInterval(clock) ; this.$Loading.finish(); this.$router.push('/') ; } },1000) }.bind(this)).catch(function(err){ this.$Message.error('登入失敗,錯誤:'+ err); this.$Loading.error(); }.bind(this))
差點忘記了一點,在router中要配置需要驗證是否登入的請求
附上router/index.js 程式碼
import Vue from 'vue' import Router from 'vue-router' import Login from '@/components/Login/Login' import P404 from '@/components/404/404' import Main from '@/components/Main' Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/login',//登入頁 name: 'Login', component: Login }, { path: '/',//首頁 name: 'Main', component: Main, meta: { requireAuth: true, // 新增該欄位,表示進入這個路由是需要登入的 }, }, { path: '*', component: P404 } //這裡是保證錯誤地址會跳轉到404介面進行提示 ] })
這些方法的編寫順序可能沒有體現出來,不過最終效果就是這個了,如果有疑問歡迎留言
將會盡快回復您
相關推薦
vuex + axios 做登入驗證 並且儲存登入狀態
還是那句話,網上找個完整的部落格真的難,實現效果全靠摸索啊 第一步:安裝axios 、vuex npm i -s axios npm i -s vuex 執行這兩句 ,vue等環境搭建就不廢話了 第二步:配置main.js檔案 上圖不上
vue+vuex+axios做登入、註冊頁許可權攔截
在GitHub上有很多寫好的模板,這個專案也是基於模板做的。 現在記錄一下我做的過程 1、修改config資料夾裡的dev.env.js裡的BASE_API,把地址改成請求後端的公共部分 BASE_API: '"http://192.168.xx.xx"', 2、接下來
玩轉web之servlet(六)---session介紹及簡單使用(登入驗證中儲存資訊)
在瀏覽器與伺服器進行互動時,往往需要把涉及到的一些資料儲存下來,這時就需要使用cookie或session進行狀態管理。這篇文章先來說說session怎麼用,首先在servlet中建立一個session來儲存資訊,舉個例子,在做登陸驗證時,如果登陸成功,需要將使用者的資訊儲
07+. Django使用者登入驗證系統和登入登出
開啟微信掃一掃,關注微信公眾號【資料與演算法聯盟】 轉載請註明出處:http://blog.csdn.net/gamer_gyt 博主微博:http://weibo.com/234654758 Github:https://github.com
Python3 Post登入並且儲存cookie登入其他頁面
import urllib.request import sys import http.cookiejar import urllib.parse from bs4 import BeautifulSoup import codecs import re #登入頁面 url = "h
javaweb 登入驗證儲存登入資訊
使用的Strust2框架,寫了一個過濾器LoginFilter但在跳轉頁面後發現s標籤中的登入Action內容沒有正常顯示因為直接跳轉的話少了一句 this.user = this.userManager.loadByEmail(user.getEmail(
vue router+vuex實現首頁登入驗證判斷邏輯
首頁登入邏輯要求在頁面上判斷是否獲取到登入token ,沒有獲取到則跳轉到登入頁。登入成功後,跳轉到前一個頁面。 1.vue router 路由判斷首先我們想到的是router.beforeEach 前置導航守衛 ,這個方法接受三個引數 to from next 。 to引數為即將跳
有登入驗證的情況下,做介面請求
qycloud這種方式是可以的 import requests import pprint def login_api(): values = { "username": "apitest", "password": "111111",
用ajax去做圖片驗證碼登入
下面是view()程式碼<script src="~/Scripts/jquery-1.10.2.js"></script> @*以下就是圖片驗證碼;使用者名稱、密碼、及驗證碼*@ <script language="javascript" type="tex
springcloud閘道器攔截+redis+自定義token做登入驗證操作
網上看到的token做起來都太複雜,介紹說耗費的記憶體較大,寫的封裝方法非常多,看來看去非常不方便,自己就藉助token思想,和閘道器攔截器組合操作的登入驗證機制。 1.下面這段程式碼就是使用者請求,驗證資料庫是否有這個使用者名稱和密碼,使用者登入成功與否,成功登入就生成token儲存到re
VUE跳轉和登入驗證儲存問題
1、跳轉 sumitlogin:function () { if(this.accesscode==='access'){ localStorage.userid=this.userid; this.URL =thi
SSM 實訓筆記 -10- 使用 sessionStorage 儲存資料、js 圖片驗證碼、登入載入動畫
SSM 實訓筆記 -10- 使用 sessionStorage 儲存資料、js 圖片驗證碼、登入載入動畫 本篇內容: (1)在登入成功時,使用 sessionStorage 儲存使用者的使用者名稱,並在登入成功後的首頁上展示使用者名稱。 (2)js 圖片驗證碼,使用 js 和
Django筆記---使用者註冊和登入驗證(2)--資料庫儲存
使用者登入第二步,進入資料庫查詢使用者資訊。 orm模型操作 -關係資料庫對映 規則表示式 ORM把應用程式世界表示為具有角色(關係中的部分)的一組物件(實體或值)。 資料庫表的建立: from django.db import models
vue.js+elementUI學習01之後臺管理登入驗證實現axios和springMVC互動
前段時間學習了vue.js的一些相關知識。現在動手敲程式碼,想實現一個簡單的後臺管理,包括登入驗證、選單導航、列表、增刪改查,選單/按鈕的許可權控制等一些常見功能。當然網上也有很多例子了,只是想自己敲一遍程式碼。一直從事後臺開發,公司都是有專門的前端設計及開發的
springmvc+mybatis登入驗證2.0(更新了使用session來進行儲存使用者值,登出後清除session),並進行了攔截器的設定
本次在之前的文章實現登入註冊的基礎上又進行了新的升級,主要是採用了session和攔截器來對功能進行完善 新的Controller層 package lyb.com.controller; import java.util.ArrayList; import java.u
【筆記】vue+springboot前後端分離實現token登入驗證和狀態儲存的簡單實現方案
簡單實現 token可用於登入驗證和許可權管理。 大致步驟分為: 前端登入,post使用者名稱和密碼到後端。 後端驗證使用者名稱和密碼,若通過,生成一個token返回給前端。 前端拿到token用vuex和localStorage管理,登入成功進入首頁。 之後前端每一次許可權操作如跳轉路由,都需要判斷是否存
Nginx web 網站登入驗證
nginx web 訪問認證登入在一些業務不能夠直接提供給外部人員查看,只能指定某些人來查看。為了安全起見,限定訪問ip,外加在頁面上做個簡單的登入頁面認證。操作很簡單,在這裏做個簡單的記錄,以便後續查看回憶。操作系統CentOS 7.2nignx 1.10.1首先我們用Nginx提供HTTP的Basic
利用functools模組的wraps裝飾器實現Flask的登入驗證
首先看一段官方對functools.wraps的功能描述: This is a convenience function for invoking update_wrapper() as a function decorator when defining a wrapper
米絡科技學習網站的測試網站突然登入不了,由於session沒有儲存登入資訊
session資訊儲存在memcache 裡,重啟下memcache, 過程: 1測試是否成功安裝memcached: ls -al /usr/local/bin/mem* 2.啟動memcached /usr/local/bin/memcached -d -m 10 -u ro
學習筆記 Selenium3+java+Eclipse 通過Cookie跳過登入驗證碼
參考文章:https://blog.csdn.net/ab_2016/article/details/78427084 環境: fidder java + selenium Cookie的處理分為: 伺服器向客戶端傳送cookie 瀏覽器將cookie儲存 之