這次帶給大家vuex實現登陸與未登入不同權限,vuex實現登陸與未登入不同權限的注意事項有哪些,以下就是實戰案例,一起來看一下。
基礎想法就是使用vuex狀態管理來儲存登入狀態(其實就是存一個值,例如token),然後在路由跳轉前進行登入狀態的判斷,可以使用vue-router的全域前置守衛beforeEach,也可以使用路由獨享的守衛beforeEnter。
導航守衛
如其名,vue-router" 提供的導航守衛主要用來透過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程中:全局的, 單一路由獨享的, 或組件級的。 記住參數或查詢的改變並不會觸發進入/離開的導航守衛。你可以透過觀察 $route 物件來應對這些變化,或使用beforeRouteUpdate的元件內守衛。
完整的導航解析流程
# 1、導航被觸發。
2、在失活的元件裡呼叫離開守衛。
3、呼叫全域的 beforeEach 守衛。
4.在重複使用的元件裡呼叫 beforeRouteUpdate 守衛 (2.2 )。
5、在路由配置裡呼叫 beforeEnter。
6、解析異步路由組件。
7.在被啟動的元件裡呼叫 beforeRouteEnter。
8.呼叫全域的 beforeResolve 守衛 (2.5 )。
9.導航被確認。
10、調用全域的 afterEach 鉤子。
11、觸發 DOM 更新。
12.用創建好的實例呼叫 beforeRouteEnter 守衛中傳給 next 的回呼函數。
全域守衛
你可以使用 router.beforeEach註冊一個全域前守衛
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... })
當一個導航觸發時,全域前置守衛會按照建立順序呼叫。守衛是非同步解析執行,此時導航在所有守衛 resolve 完成之前一直處於 等待中。
每個守衛方法接收三個參數:
to: Route:即將要進入的目標 路由物件
from: Route:目前導航正要離開的路由
# next: Function:一定要呼叫該方法來 resolve 這個鉤子。執行效果依賴 next 方法的呼叫參數。
next():進行管道中的下一個鉤子。如果全部鉤子執行完了,則導航的狀態就是 confirmed (確認的)。
next(false):中斷目前的導航。如果瀏覽器的 URL 改變了(可能是使用者手動或瀏覽器後退按鈕),那麼 URL 位址會重設到 from 路由對應的位址。
next('/')或next({ path: '/' }): 跳到一個不同的位址。目前的導航被中斷,然後進行一個新的導航。
next(error):(2.4.0 ) 如果傳入 next 的參數是一個 Error 實例,則導航會被終止且該錯誤會傳遞給 router.onError()註冊過的回呼。
確保要呼叫 next 方法,否則鉤子就不會被 resolved。
# 路由獨享的守衛
# 你可以在路由配置上直接定義beforeEnter守衛:
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] })
還有其他部分守衛,詳情可以看官方文件https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
安裝vuex後
# 建立store.js
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); const state = { isLogin: 0 } const mutations = { changeLogin(state,status){ state.isLogin = status; } } const actions = { loginAction({commit}){ commit('changeLogin',1); } } export default new Vuex.Store({ state, actions, mutations })
login.vue中
引入import { mapActions,mapState } from 'vuex'
# 接著進行登入狀態的改變,base_url就是路徑
export default { name: 'Login', data(){ return{ loginForm: { username: '', password: '', }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, ], password: [ { required: true, message: '请输入密码', trigger: 'blur' } ], }, showLogin: false } }, mounted(){ this.showLogin = true; }, computed: { ...mapState(['isLogin']) }, methods: { ...mapActions(['loginAction']), submitForm(formName){ this.$refs[formName].validate((valid) => { if(valid){ if(this.loginForm.username == 'aaa' && this.loginForm.password == '111'){ console.log('验证通过'); this.loginAction(); this.$router.push('manage'); }else{ console.log('账号密码出错'); // this.$message.error('账号密码出错'); this.$message({ type: 'error', message: '账号密码出错' }); } console.log('请求地址: ' + base_url); }else{ console.log('验证失败'); return false; } }) } } }
接下去只要使用路由守衛即可
# beforeEach使用實例
router.beforeEach((to,from,next)=>{ if(to.meta.check){ var check = async function(){ const result = await checkUser(); if(result.status == 0){ next(); }else{ alert('用户未登录'); next({path: '/login'}); } } check(); //后台验证session }else{ next(); } })
beforeEnter使用實例
#export default new Router({ routes: [ { path: '/login', component: Login }, { path: '/manage', name: '', component: Manage, beforeEnter: (to,from,next)=> { //导航守卫 console.log(to) console.log(from) if(store.state.isLogin == 1){ console.log('用户已经登录'); next(); }else{ console.log('用户未登录'); next({path: '/login',query:{ Rurl: to.fullPath}}); //未登录则跳转到登陆界面,query:{ Rurl: to.fullPath}表示把当前路由信息传递过去方便登录后跳转回来 } } } ] })
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是vuex實現登陸與未登入不同權限的詳細內容。更多資訊請關注PHP中文網其他相關文章!
![在Vue应用中使用vuex时出现“Error: [vuex] do not mutate vuex store state outside mutation handlers.”怎么解决?](https://img.php.cn/upload/article/000/000/164/168760467048976.jpg)
在Vue应用中,使用vuex是常见的状态管理方式。然而,在使用vuex时,我们有时可能会遇到这样的错误提示:“Error:[vuex]donotmutatevuexstorestateoutsidemutationhandlers.”这个错误提示是什么意思呢?为什么会出现这个错误提示?如何解决这个错误?本文将详细介绍这个问题。错误提示的含

Vue2.x是目前最流行的前端框架之一,它提供了Vuex作为管理全局状态的解决方案。使用Vuex能够使得状态管理更加清晰、易于维护,下面将介绍Vuex的最佳实践,帮助开发者更好地使用Vuex以及提高代码质量。1.使用模块化组织状态Vuex使用单一状态树管理应用的全部状态,将状态从组件中抽离出来,使得状态管理更加清晰易懂。在具有较多状态的应用中,必须使用模块

Vuex是做什么的?Vue官方:状态管理工具状态管理是什么?需要在多个组件中共享的状态、且是响应式的、一个变,全都改变。例如一些全局要用的的状态信息:用户登录状态、用户名称、地理位置信息、购物车中商品、等等这时候我们就需要这么一个工具来进行全局的状态管理,Vuex就是这样的一个工具。单页面的状态管理View–>Actions—>State视图层(view)触发操作(action)更改状态(state)响应回视图层(view)vuex(Vue3.

编程语言用来以计算机可以理解的语言给计算机发出指令。计算机语言分为三种类型,如下所示:机器语言符号语言高级语言机器语言计算机是一台机器。由于它的内存只能存储1和0,必须以一串1和0的流的形式给计算机发出指令,即二进制代码。这些对机器来说很容易理解。以二进制代码编写的程序可以直接输入计算机执行,这被称为机器语言。机器语言的优点包括:执行速度非常快。很难编写和阅读机器语言的程序。机器指令很难记住。符号语言也称为汇编语言。汇编程序包含“助记符”。“助记符”是指以缩写的形式很容易记住的信息。符号语言的优
![在Vue应用中使用vuex时出现“Error: [vuex] unknown action type: xxx”怎么解决?](https://img.php.cn/upload/article/000/887/227/168766615217161.jpg)
在Vue.js项目中,vuex是一个非常有用的状态管理工具。它可以帮助我们在多个组件之间共享状态,并提供了一种可靠的方式来管理状态的变化。但在使用vuex时,有时会遇到“Error:[vuex]unknownactiontype:xxx”的错误。这篇文章将介绍该错误的原因及解决方法。1.错误原因在使用vuex时,我们需要定义一些actions和mu

在Vue应用的开发过程中,使用vuex来管理应用状态是非常常见的做法。然而,在使用vuex的过程中,有时我们可能会遇到这样的错误提示:“Error:'xxx'hasalreadybeendeclaredasadataproperty.”这个错误提示看起来很莫名其妙,但其实是由于在Vue组件中,使用了重复的变量名来定义data属性和vuex

在Vue应用中使用Vuex是非常常见的操作。然而,偶尔在使用Vuex时会遇到错误信息“TypeError:Cannotreadproperty'xxx'ofundefined”,这个错误信息的意思是无法读取undefined的属性“xxx”,导致了程序的错误。这个问题其实产生的原因很明显,就是因为在调用Vuex的某个属性的时候,这个属性没有被正确


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

PhpStorm Mac 版本
最新(2018.2.1 )專業的PHP整合開發工具

Dreamweaver Mac版
視覺化網頁開發工具

SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。