前端實(shí)現(xiàn)不同角色登入展示不同頁面效果實(shí)例
功能介紹：首先是不同身份的用戶展示的界面不同，其次實(shí)現(xiàn)在注冊時(shí)選擇對應(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. 在后臺的 User 類里面加一個(gè)新的字段叫 role，然后重啟后臺
3. 在菜單的標(biāo)簽上加一個(gè) v-if 判斷就可以了（eg:想讓管理員看到這個(gè)菜單）
<!-- <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)限訪問的路徑，那這個(gè)時(shí)候我就讓用戶去到一個(gè)沒有權(quán)限的頁面，不讓他訪問實(shí)際的頁面
next('/403')
} else {
next()
}
})
在注冊時(shí)選擇不同身份登錄
1. 在對應(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: '請選擇角色', trigger: 'blur' },
],3. 在WebController 中設(shè)置判斷，即注冊時(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了Vue3.2+Ts組件之間通信的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
淺談vue實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽的函數(shù) Object.defineProperty
本篇文章主要介紹了淺談vue實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽的函數(shù) Object.defineProperty，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
vue組件中節(jié)流函數(shù)的失效的原因和解決方法
這篇文章主要介紹了vue組件中節(jié)流函數(shù)的失效和解決方法，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了Vuex 單狀態(tài)庫與多模塊狀態(tài)庫詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
使用Vue-cli3.0創(chuàng)建的項(xiàng)目 如何發(fā)布npm包
這篇文章主要介紹了使用Vue-cli3.0創(chuàng)建的項(xiàng)目，如何發(fā)布npm包,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
這篇文章主要介紹了vue中nextTick的相關(guān)資料，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
使用webpack-obfuscator進(jìn)行代碼混淆及報(bào)錯(cuò)解決過程
隨著前端應(yīng)用的復(fù)雜度增加,保護(hù)客戶端的JavaScript代碼變得更為重要,webpack-obfuscator插件通過對代碼進(jìn)行混淆,如變量重命名、字符串加密等,提高代碼的保密性,防止源碼被輕易查看或修改2024-10-10
vue前端自適應(yīng)布局實(shí)現(xiàn)教程(一步到位所有自適應(yīng))
?自適應(yīng)布局是一種根據(jù)不同的設(shè)備屏幕分辨率進(jìn)行布局的方式,它為不同的屏幕分辨率定義了不同的布局,下面這篇文章主要給大家介紹了關(guān)于vue前端自適應(yīng)布局實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2024-08-08
這篇文章主要為大家詳細(xì)介紹了vue中scss語法的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
今天小編就為大家分享一篇element UI upload組件上傳附件格式限制方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09