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