账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    如何在vue-router的beforeEach钩子里做页面访问权限验证
    36
    0

    目前的情况是准备把项目里的页面访问权限验证放在vue-router的全局钩子beforeEach里,但是这个权限验证是依赖于vue-store下的某一个变量的。我也有想过把这个变量移动到window下面,但是这样好像不太安全。请问有没有什么比较好的方法?比如说怎样在beforeEach里获取到全局store里的某个变量的值?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 辣條君~ 普通会员 1楼

      在Vue Router的beforeEach钩子里进行页面访问权限验证,你可以使用V Router的beforeEach钩子函数和beforeEach后端接口。

      以下是一个简单的例子:

      ```javascript import Vue from 'vue' import Router from 'vue-router' import { login } from '@/api/login'

      Vue.use(Router)

      export default new Router({ routes: [ { path: '/login', name: 'login', component: login, beforeEach: function () { // 验证用户是否登录 if (!this.$store.state.auth) { // 用户未登录,跳转到登录页面 this.$router.push('/login') } } } ] }) ```

      在这个例子中,我们在beforeEach钩子函数中检查用户的登录状态。如果用户未登录,我们直接跳转到登录页面。这只是一个基本的例子,实际的权限验证可能需要更复杂的逻辑,比如检查用户是否有足够的权限访问某个页面,或者检查用户是否已经登录等。

      如果你使用的是Ant Design Vue,你可以在beforeEach钩子中使用this.$router.push('/login')来跳转到登录页面。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部