これらの二日間は、常にVueの兄弟が、家に滞在し、ログインと登録にログイン成功を求めて、ログインページに戻って記録されていない、と今私は(読むために2分の技術)を達成するために、最もシンプルかつ実用的な方法を使用しています

実際にログインし、各プロジェクトは、機能を実装する必要があり、一度にログインし、保留にログインし、登録されました。オンライン、多くの方法がありますが、しかし、理解することは容易ではありませんが、私自身の方法については、非常にシンプルで実用的な、ここで述べた
コアは、私が望んでいたときに、所望のオープンを達成するために、このようなリフレッシュなど、データを引き出し、預金にお使いのブラウザまたはシャットダウンをのlocalStorageを使用することです効果に


ルータで/ index.jsで

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
routes: [
    {path:'/', redirect:'/home'},
    {path:'/login',name:'登录',component:resolve =>{require(['@/components/login'],resolve)}},
    {path:'/home',name:'首页',component:resolve =>{require(['@/components/home'],resolve)}}
    ]
})

これは、リダイレクト(デフォルトのジャンプは)ちょうど直接ホームページジャンプを入力して、ホーム・ページに直接書き込むことができます

その後、我々は定期的な機能はhome.vueがログイン状態の値を決定する作成します(ログインがのlocalStorage変数にlogin.vueに堆積され、今の読み取りをしましょう)

      created() {
            console.log(localStorage.getItem("Login"));
            if(localStorage.getItem("Login")){
                console.log("登录过了");//登录成功了,保留在登录页面   
            }else{
                console.log("没有登录");
                this.$router.push("/login");//没有登录过 返回登录页面
            }
          },

その後、我々はlogin.vue時間内に成功し、ユーザが状態を書くログインしたときにデータを要求します

      axios.post("后台接口",qs.stringify({
                      username:"用户名",
                     password: "密码"
                        }),{
            headers: {//请求头
                "Content-Type": "application/x-www-form-urlencoded",
                "Accept":"application/json"
                }
            }).then((response) => {//成功回调
                if(response.data.status=="200"){//状态正常的时候
                      this.$router.push("/home");
         //存储名字为Login值为true的变量,方便我们在home页面判断是否登录
                      localStorage.setItem("Login",true)
              }
                    }, (error) => {
                        console.log(error);
                    });

あなたはログホームボタンを持っている場合は、とき実行を終了します

         out(){
                  localStorage.removeItem("Login");//删掉我们存的变量就可以了
                  this.$router.push("/login");//点击退成功按钮返回登录页面
              }

この実現のVueと着陸登録ユーザーリフレッシュブラウザは、開放または閉鎖は、ログインしたまま

どのような種類は非常に単純ではないのですか?

おすすめ

転載: www.cnblogs.com/jlfw/p/11863629.html
おすすめ