vue如何实现未登录不能访问某些页面

 更新时间:2024年03月12日 10:05:54   作者:iiiilooaixuud  
这篇文章主要介绍了vue如何实现未登录不能访问某些页面问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue实现未登录不能访问某些页面

1.在需要拦截的页面路由加上 

meta: { requireAuth: true }

2.在main.js加上判断即可

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {  // 需要权限
      //判断当前是否拥有权限
      if (getUserInfo().user_sub) {
          next();
      } else {  // 无权,跳转登录
        mgr.signinRedirect();
      }
  } else {  // 不需要权限,直接访问
      next();
  }
})

具体代码:

vue某些页面要登录之后才能访问,且登录之后跳转到之前的页面

// router文件夹下的 index.js
import Vue from "vue";
import Router from "vue-router";
import routes from "./routes";  // 配置的路径

Vue.use(Router);

const router = new Router({
  routes,
  scrollBehavior
  // mode: 'history'
});

const router = new Router({
  routes,
  scrollBehavior
  // mode: 'history'
});

router.beforeEach((to, from, next) => {
  if (to.matched.some(route => route.meta && route.meta.requiresAuth)) {
    if (!this.$storage.getStorage("userInfo")) {  // 没有登录信息跳转到登录页
      next({
        path: "/login",
        query: { redirect: to.fullPath }  // 'to.fullPath'跳转到登录之前页面的路径
      });
    } else {
      next();
    }
  } else {
    next();
  }
});
export default router;

在登陆页面( login.vue里 )

<template>
  <div class="login-container">
    <van-form @submit="onSubmit">
      <van-field v-model="username" label="用户名" placeholder="用户名" required />
      <van-field v-model="password" type="password" label="密码" placeholder="密码" required />
      <div style="margin: 40px 0 0 0;">
        <van-button round block type="info" size="small" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { webLogin } from '@/apis/apis'
export default {
  data() {
    return {
      username: '',
      password: '',
    }
  },
  created() { },
  methods: {
    onSubmit() {
      if (!this.username) {
        this.$notify({ type: "danger", message: "请填写用户名" });
        return;
      } else if (!this.password) {
        this.$notify({ type: "danger", message: "请填写密码" });
        return;
      }
      let params = {
        username: this.username,
        password: this.password
      }
      webLogin(params).then(res => {
        if (res.code == 0) {
          this.$notify({ type: 'success', message: '恭喜,登录成功!' });
          // this.$router.push('/user'); 
          this.$storage.setStorage('userInfo', res.data);
          setTimeout(() => {
            let path = '/user';   // '/user' 为个人中心页面
            if (this.$route.query.redirect) {
              path = this.$route.query.redirect   // 跳到之前的页面
            }
            this.$router.push({
              path: path
            });
          }, 1000)
        } else {
          this.$notify(res.message)
        }
      })
    }
  }
}
</script>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue3+TypeScript报错:无法找到模块xx的声明文件问题

    Vue3+TypeScript报错:无法找到模块xx的声明文件问题

    这篇文章主要介绍了Vue3+TypeScript报错:无法找到模块xx的声明文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue项目中将element-ui table表格写成组件的实现代码

    vue项目中将element-ui table表格写成组件的实现代码

    这篇文章主要介绍了vue项目中将element-ui table表格写成组件的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-06-06
  • mpvue构建小程序的方法(步骤+地址)

    mpvue构建小程序的方法(步骤+地址)

    mpvue是一个使用Vue.js开发小程序的前端框架。框架基于 Vue.js 核心,这篇文章主要介绍了mpvue构建小程序的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Vue常见报错整理大全(从此报错不害怕)

    Vue常见报错整理大全(从此报错不害怕)

    写代码的过程中一定会遇到报错,遇到报错不要担心,认真分析就可以解决报错,同时积累经验,早日成为大牛,这篇文章主要给大家介绍了关于Vue常见报错整理的相关资料,需要的朋友可以参考下
    2022-08-08
  • vue+elementui实现下拉表格多选和搜索功能

    vue+elementui实现下拉表格多选和搜索功能

    这篇文章主要为大家详细介绍了vue+elementui实现下拉表格多选和搜索功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • vue报错"vue-cli-service‘不是内部或外部命令,也不是...”的解决办法

    vue报错"vue-cli-service‘不是内部或外部命令,也不是...”的解决办法

    这篇文章主要介绍了vue报错"vue-cli-service‘不是内部或外部命令,也不是...”的解决办法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-01-01
  • vue-mounted中如何处理data数据

    vue-mounted中如何处理data数据

    这篇文章主要介绍了vue-mounted中如何处理data数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue3基础安装以及配置详解

    Vue3基础安装以及配置详解

    这篇文章主要介绍了Vue3基础安装以及配置详解,需要的朋友可以参考下
    2023-01-01
  • vue实现带放大镜的搜索框

    vue实现带放大镜的搜索框

    这篇文章主要为大家详细介绍了vue实现带放大镜的搜索框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 在vue中完美使用ueditor组件(cdn)解读

    在vue中完美使用ueditor组件(cdn)解读

    这篇文章主要介绍了在vue中完美使用ueditor组件(cdn)解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01

最新评论