Vue-router路由导航

Posted 2020-12-21 zxg-code

登陆按钮的方法

    loginbtn () {
      // 预校验
      this.$refs.loginRef.validate(async (valid) => {
        // console.log(valid)
        if (!valid) { return }
        // 数据解构
        const { data: res } = await this.$http.post(‘/login‘, this.loginForm)
        console.log(res)
        if (res.meta.status !== 200) return this.$message.error(‘登陆失败‘)
        this.$message.success(‘恭喜您，登陆成功！‘)
        // 保存token值 到 sessionStorage 中
        window.sessionStorage.setItem(‘token‘, res.data.token)
        // 编程式导航 转到index页面
        this.$router.push(‘/index‘)
      })
    },

通过token值的有无进行判断是否正常登录

在router文件中

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // 如果正常登录 直接放行
  next()
  if (to.path === ‘/login‘) return next()
  // 从SessionStroage中获取到token值
  const tokenStr = window.sessionStorage.getItem(‘token‘)
  // 没有token值 强制跳转
  if (!tokenStr) return next(‘/login‘)
})