vue中使用路由守卫实现登录得思路??

思路:
1.给我们登录页面得那个组件设置路由,并且设置一个meta属性值,用来记录token值存在与否
2.在main.js里面设置router,beforeEach设置全局路由守卫,点击登录得时候把token值存到localStorage
3.如果localStorage获取到token值,就就让他进入要登陆得页面,否则就阻止进入

  • 路由
{
    path: '/home',
    name: 'Home',
    component: Home,
    meta: {
      // 设置路由元数据
      Authorition: true
    },
},
{
    path: '/login',
    name: 'Login',
    component: Login
  }

main.js

router.beforeEach((to, from, next) => {
  console.log('to', to)
  const token = localStorage.getItem('token')
  if (to.meta.Authorition) {
    if (token) {
      next()
    } else {
      router.push({ name: 'Login' })
    }
  } else {
    next()
  }
})

登录页面

 goLogin() {
      this.$refs["login_form"].validate(async valid => {
        //表单通过validate方法实现整体表单,其中valid为true代表所有验证规则通过,否则报错
        if (valid) {
          //调用封装的login方法
          const result = await login(this.ruleForm);
          let { flag } = result;
          console.log(flag)
          if (flag === 2) {
            //登录成功,则中转回上次访问的页面
            this.$router.push('/home');
          }
        } else {
          //登录失败,给出失败的提示
          return false;
        }
      });
    }

注意:
登录得时候token值得获取,如果封装axios,需要根据需求在请求拦截里面进行token得获取和设置请求头

其他:
token值是什么?
token其实说的更通俗点可以叫暗号,在一些数据传输之前,要先进行暗号的核对,不同的暗号被授权不同的数据操作。

token值得认识:https://www.jianshu.com/p/a2868b27675c

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值