¿Cómo usar los protectores de enrutamiento en vue para lograr ideas de inicio de sesión? ?

Ideas:
1. Establezca el enrutamiento para el componente de nuestra página de inicio de sesión y establezca un valor de meta atributo para registrar la existencia del valor del token.
2. Configure el enrutador en main.js, antes de que cada uno establezca la protección de enrutamiento global, haga clic cuando inicie sesión in El valor del token se almacena en localStorage
3. Si localStorage obtiene el valor del token, déjelo ingresar a la página donde quiere iniciar sesión, de lo contrario no podrá ingresar

  • enrutamiento
{
    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()
  }
})

página de inicio de sesión

 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;
        }
      });
    }

Nota:
Vale la pena obtener el token cuando inicie sesión. Si encapsula axios, debe obtener el token y configurar el encabezado de la solicitud en la interceptación de la solicitud de acuerdo con sus necesidades.

Otro:
¿Cuál es el valor del token?
El token es en realidad más popular y se puede llamar código secreto. Antes de que se transmitan algunos datos, primero se debe verificar el código secreto. Se autorizan diferentes códigos secretos para diferentes operaciones de datos.

Vale la pena conocer el token: https://www.jianshu.com/p/a2868b27675c

Supongo que te gusta

Origin blog.csdn.net/lqlq54321/article/details/106801152
Recomendado
Clasificación