vue中如何通过设置白名单来实现拦截其他的页面_Vue 页面权限控制和登陆验证...

eb9e23afddafb8dc926775fba7b2491e.png
https://github.com/woai3c/Front-end-articles​github.com

页面权限控制

页面权限控制是什么意思呢?

就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的。如果一个页面,有角色越权访问,这时就得做出限制了。

Vue 动态添加路由及生成菜单这是我写过的一篇文章, 通过动态添加路由和菜单来做控制,不能访问的页面不添加到路由表里,这是其中一种办法。

另一种办法就是所有的页面都在路由表里,只是在访问的时候要判断一下角色权限。如果有权限就让访问,没有权限就拒绝,跳转到 404 页面。

思路

在每一个路由的 meta 属性里,将能访问该路由的角色添加到 roles 里。用户每次登陆后,将用户的角色返回。然后在访问页面时,把路由的 meta 属性和用户的角色进行对比,如果用户的角色在路由的 roles 里,那就是能访问,如果不在就拒绝访问。

代码示例

路由信息

routes: [
    {
    
        path: '/login&
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js ,可以通过按钮点击来实现组件之间的页面跳转或替换。有几种方式可以实现这一功能,以下是其两种常见的方法: 1. 使用 Vue Router:Vue Router 是 Vue.js 官方提供的路由管理插件。首先,你需要安装和配置 Vue Router。然后,在你的按钮点击事件,使用 `router.push()` 方法实现页面跳转。例如: ```javascript <template> <div> <button @click="goToAnotherPage">跳转到另一个页面</button> </div> </template> <script> import { mapActions } from 'vuex'; export default { methods: { ...mapActions(['goToAnotherPage']), }, }; </script> ``` ```javascript // 在路由配置文件 import VueRouter from 'vue-router'; import AnotherPage from './components/AnotherPage.vue'; const routes = [ { path: '/another-page', component: AnotherPage }, // 其他路由配置... ]; const router = new VueRouter({ routes, }); export default router; ``` 2. 使用条件渲染:在主页面组件,使用条件渲染来控制要显示的组件。通过点击按钮,改变条件渲染的变量,从而切换到不同的组件。例如: ```javascript <template> <div> <button @click="toggleComponent">切换组件</button> <component v-if="showComponent" :is="currentComponent"></component> <component v-else :is="anotherComponent"></component> </div> </template> <script> import AnotherComponent from './components/AnotherComponent.vue'; export default { data() { return { showComponent: true, }; }, computed: { currentComponent() { return this.showComponent ? 'MainComponent' : 'AnotherComponent'; }, }, components: { AnotherComponent, }, methods: { toggleComponent() { this.showComponent = !this.showComponent; }, }, }; </script> ``` 以上是两种常见的实现方式,你可以根据具体的需求选择适合你的方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值