vue-element-admin 跳過登入許可權
阿新 • • 發佈:2020-12-11
技術標籤:前端vue跳過許可權vue取消許可權vue--element許可權
前言:
專案使用人數不多,功能也不涉及到許可權,開發vue-element-adminq許可權比較花時間,遮蔽許可權是最快的方法。網上其他的教程說的太複雜了,對於小白來說確實不好理解。
操作
只需要修改一個檔案即可。
找到src/permission.js檔案,替換成以下內容即可。
import router from './router' import store from './store' import { Message } from 'element-ui' import NProgress from 'nprogress' // progress bar import 'nprogress/nprogress.css' // progress bar style import { getToken } from '@/utils/auth' // get token from cookie import getPageTitle from '@/utils/get-page-title' NProgress.configure({ showSpinner: false }) // NProgress Configuration const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist router.beforeEach(async (to, from, next) => { // start progress bar NProgress.start() // set page title document.title = getPageTitle(to.meta.title) // determine whether the user has logged in // const hasToken = getToken() // if (hasToken) { // if (to.path === '/login') { // // if is logged in, redirect to the home page // next({ path: '/' }) // NProgress.done() // } else { // // determine whether the user has obtained his permission roles through getInfo // const hasRoles = store.getters.roles && store.getters.roles.length > 0 // if (hasRoles) { // next() // } else { // try { // // get user info // // note: roles must be a object array! such as: ['admin'] or ,['developer','editor'] // const { roles } = await store.dispatch('user/getInfo') // // generate accessible routes map based on roles // const accessRoutes = await store.dispatch('permission/generateRoutes', roles) // // dynamically add accessible routes // router.addRoutes(accessRoutes) // // hack method to ensure that addRoutes is complete // // set the replace: true, so the navigation will not leave a history record // next({ ...to, replace: true }) // } catch (error) { // // remove token and go to login page to re-login // await store.dispatch('user/resetToken') // Message.error(error || 'Has Error') // next(`/login?redirect=${to.path}`) // NProgress.done() // } // } // } // } else { // /* has no token*/ // if (whiteList.indexOf(to.path) !== -1) { // // in the free login whitelist, go directly // next() // } else { // // other pages that do not have permission to access are redirected to the login page. // next(`/login?redirect=${to.path}`) // NProgress.done() // } // } const hasToken = 'admin-token' const role = 'admin' if (hasToken) { next() const accessRoutes = await store.dispatch('permission/generateRoutes', role) // dynamically add accessible routes router.addRoutes(accessRoutes) } }) router.afterEach(() => { // finish progress bar NProgress.done() })
遮蔽後右上角的退出小視窗也還在,跳過登入後,圖示顯示會有點問題,取消掉該視窗
在vue-element-admin\src\layout\components\Navbar.vue
遮蔽掉以下一段程式碼:
<!-- <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click"> --> <!-- <div class="avatar-wrapper"> <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar"> <i class="el-icon-caret-bottom" /> </div> --> <!-- <el-dropdown-menu slot="dropdown"> --> <!-- <router-link to="/profile/index"> <el-dropdown-item>Profile</el-dropdown-item> </router-link> --> <!-- <router-link to="/"> <el-dropdown-item>專案配置</el-dropdown-item> </router-link> --> <!-- <a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/"> <el-dropdown-item>Github</el-dropdown-item> </a> <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/"> <el-dropdown-item>Docs</el-dropdown-item> </a> --> <!-- <el-dropdown-item divided @click.native="logout"> <span style="display:block;">退出</span> </el-dropdown-item> --> <!-- </el-dropdown-menu> --> <!-- </el-dropdown> -->
取消後,完美的暫時遮蔽許可權相關的功能。