前端實現(xiàn)不同角色登入展示不同頁面效果實例
更新時間：2024年08月12日 09:09:03 作者：umumuuuyqs
要實現(xiàn)不同角色登錄跳轉(zhuǎn)不同的前端頁面,可以在登錄成功后,根據(jù)用戶的角色信息,使用路由跳轉(zhuǎn)到不同的頁面,這篇文章主要給大家介紹了關(guān)于前端實現(xiàn)不同角色登入展示不同頁面效果的相關(guān)資料,需要的朋友可以參考下
功能介紹：首先是不同身份的用戶展示的界面不同，其次實現(xiàn)在注冊時選擇對應(yīng)的身份
不同身份的用戶系統(tǒng)展示界面不同
1. 數(shù)據(jù)庫user 表中添加role屬性
No.1 點擊“表”——右擊“user”——點擊“設(shè)計表”——添加“role”屬性——user表中進行角色設(shè)置
添加屬性：
No.2 “user”表中進行“role”多種角色設(shè)置（比如，用戶，管理員）
2. 在后臺的 User 類里面加一個新的字段叫 role，然后重啟后臺
3. 在菜單的標(biāo)簽上加一個 v-if 判斷就可以了（eg:想讓管理員看到這個菜單）
<!-- <el-submenu>二級菜單-->
<el-submenu index="info" v-if="user.role==='管理員'">
<template slot="title">
<i class="el-icon-house"></i>
<span> 信息管理</span>
</template>
<el-menu-item index="/user">用戶信息</el-menu-item>
</el-submenu>
完善：路由守衛(wèi)解決用戶頁面權(quán)限問題 （添置index.js頁面）
router.beforeEach((to, from, next) => {
// to 是到達(dá)的路由信息
// from 是開源的路由信息
// next 是幫助我們跳轉(zhuǎn)路由的函數(shù)
let adminPaths = ['/user']
let user = JSON.parse(localStorage.getItem('honey-user') || '{}')
if (user.role !== '管理員' && adminPaths.includes(to.path)) {
// 如果當(dāng)前登錄的用戶不是管理員，然后當(dāng)前的到達(dá)的路徑是管理員才有權(quán)限訪問的路徑，那這個時候我就讓用戶去到一個沒有權(quán)限的頁面，不讓他訪問實際的頁面
next('/403')
} else {
next()
}
})
在注冊時選擇不同身份登錄
1. 在對應(yīng)vue頁面添加預(yù)計的框框
<el-form-item prop="role">
<el-radio-group v-model="user.role">
<el-radio label="管理員"></el-radio>
<el-radio label="用戶"></el-radio>
</el-radio-group>
</el-form-item>2. 在vue頁面下方export default---data---rules添加角色提醒
role: [
{ required: true, message: '請選擇角色', trigger: 'blur' },
],3. 在WebController 中設(shè)置判斷，即注冊時該項不能為空
if(StrUtil.isBlank(user.getUsername())||StrUtil.isBlank(user.getPassword())||StrUtil.isBlank(user.getRole())){
return Result.error("數(shù)據(jù)輸入不合法");
}
4. 普通框架（未加入Mybaits），需人為補上該字段，使其插入數(shù)據(jù)庫（記得然后項目重啟）
5. 簡易版展示效果：
補充：想設(shè)置跳轉(zhuǎn)頁面鏈接很簡單
只需要如下命令
<router-link to ="/">返回首頁</router-link>
總結(jié)
到此這篇關(guān)于前端實現(xiàn)不同角色登入展示不同頁面效果的文章就介紹到這了,更多相關(guān)不同角色登入展示不同頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了vue單元格多列合并的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
Vue3使用customRef封裝防抖函數(shù)的方法詳解
防抖函數(shù)的作用是高頻率觸發(fā)的事件,在指定的單位時間內(nèi),只響應(yīng)最后一次,如果在指定的時間內(nèi)再次觸發(fā),則重新計算時間,本文將給大家詳細(xì)的介紹一下Vue3使用customRef封裝防抖函數(shù)的方法,需要的朋友可以參考下2023-09-09
vue.js中created方法是一個生命周期鉤子函數(shù)，一般可以在created函數(shù)中調(diào)用ajax獲取頁面初始化所需的數(shù)據(jù)，這篇文章主要介紹了Vue中created和mounted使用場景分析,需要的朋友可以參考下2023-05-05
vue3 onMounted異步函數(shù)同步請求async/await實現(xiàn)
這篇文章主要為大家介紹了vue3 onMounted初始化數(shù)據(jù)異步函數(shù)/同步請求async/await實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
vue+element下日期組件momentjs轉(zhuǎn)換賦值問題解決
這篇文章主要介紹了vue+element下日期組件momentjs轉(zhuǎn)換賦值問題,記錄下使用momentjs轉(zhuǎn)換日期字符串賦值給element的日期組件報錯問題，需要的朋友可以參考下2024-02-02
下面小編就為大家分享一篇基于vue-resource jsonp跨域問題的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue實現(xiàn)虛擬化列表封裝方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue組件實現(xiàn)首次加載就觸發(fā)watch方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue3中的動態(tài)路由是一種高級功能,它允許你在URL中包含變量,這些變量可以在組件內(nèi)部通過$route.params對象訪問,動態(tài)路由通常用于構(gòu)建可配置性強、更具靈活性的應(yīng)用,本文詳細(xì)介紹了如何在vue3中實現(xiàn)動態(tài)路由,需要的朋友可以參考下2024-07-07
vue開發(fā)調(diào)試神器vue-devtools使用詳解
這篇文章主要為大家詳細(xì)介紹了vue開發(fā)調(diào)試神器vue-devtools的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07