vue中實現登入控制

2021-10-01 10:41:03 字數 800 閱讀 2179

sessionstorage.username = this.username;

上面的登入頁面注意:login方法中登入成功需要寫入sessionstorage以便路由進行判斷

import vue from 'vue'

import router from 'vue-router'

vue.use(router)

const routes = [,},

,redirect: 'main/info',

children: [,

component: (resolve)=>}]

},,

redirect: 'vips/list',

children: [,

component: (resolve)=>},,

component: (resolve)=>},,

component: (resolve)=>}]

}];

const router = new router();

/*** to:表示目標路由

* from:表示**路由

* next:表示執行下一步操作

*/router.beforeeach((to, from, next) => else else) // 沒有使用者名稱就跳轉到login頁面

}}})

export default router

目前這個只是簡單的處理,這種方法官方叫做路由守衛,還有一種寫法就是在meta中新增是否需要登入的控制,在beforeeach中來判斷,和上面方法一樣的。

vue登入許可權實現 登入攔截

用sessionstorage實現,資料夾結構如下 關鍵部分如下 import vue from vue import router from vue router import index from components index import login from components log...

vue 登入驗證與許可權控制

描述具體問題 業務系統通常需要登入才能訪問受限資源,在使用者未登入情況下訪問受限資源需要重定向到登入頁面 多個業務系統之間要實現單點登入,即在乙個系統或應用已登入的情況下,再訪問另乙個系統時不需要重複登入 在登入過期或失效時,需要重定向到登入頁面 使用者登入後,需對改使用者擁有的許可權進行功能和ui...

Vue 實現登入攔截(一)

技術要點 vuevue router store.js 儲存資訊 外掛程式 mint ui的使用 效果展示 1.建立專案 vue init webpack vue login intercept cd vue login intercept npm install 2.修改的原始的目錄結構 關閉的e...