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>

在这里插入图片描述

  • 3
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue2中,可以通过路由守卫(router guard)来实现未登录不能页面的功能。路由守卫分为全局守卫和路由独享守卫两种。 全局守卫会在每个路由切换时都被调用,可以在其中判断用户是否已登录。如果未登录,则可以登录页面。 路由独享守卫只会在某个具体路由被访问时被调用,可以用来限制某些页面访问权限。 以下是一个简单的示例,展示如何使用全局守卫实现未登录不能页面的功能: ```javascript // main.js import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false router.beforeEach((to, from, next) => { // 判断用户是否已登录 const isLogin = localStorage.getItem('token') ? true : false; // 如果用户未登录且要访问页面需要登录,则登录页面 if (!isLogin && to.meta.requireAuth) { next('/login'); } else { next(); } }); new Vue({ router, render: h => h(App), }).$mount('#app') ``` 在上面的代码中,我们通过 `router.beforeEach` 注册了一个全局前置守卫。在这个守卫中,我们判断用户是否已登录,如果未登录且要访问页面需要登录,则登录页面;反之则直接进入要访问页面。 接下来,在路由配置中,我们可以通过 `meta` 字段来标记哪些页面需要登录才能访问: ```javascript // router.js import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' import Login from './views/Login.vue' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'home', component: Home, meta: { requireAuth: true // 必须登录才能访问 } }, { path: '/login', name: 'login', component: Login } ] }) ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值