ログインのアイデアを実現するためにvueでルーティングガードを使用するにはどうすればよいですか？？

アイデア：
1。ログインページのコンポーネントのルーティングを設定し、トークン値の存在を記録するメタ属性値を
設定します2. main.jsにルーターを設定し、それぞれがグローバルルーティングガードを設定する前に、ログに記録するときにクリックしますトークン値はlocalStorage3に保存されます
。localStorageがトークン値を取得した場合は、ログインしたいページに入らせてください。そうしないと、入力できなくなります。

• ルーティング

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

注：
トークンはログイン時に取得する価値があります。axiosをカプセル化する場合は、トークンを取得し、必要に応じてリクエストインターセプトにリクエストヘッダーを設定する必要があります。

その他：
トークンの値は何ですか？
トークンは実際にはより一般的であり、シークレットコードと呼ぶことができます。一部のデータを送信する前に、シークレットコードを最初にチェックする必要があります。さまざまなデータ操作に対してさまざまなシークレットコードが許可されます。

トークンは知っておく価値があります：https：//www.jianshu.com/p/a2868b27675c