vueルーティングログインブロック(vue routerログイン権限制御)

実現原理:
どのルーティングがルーティングファイルrouter/indexで検証する必要があるかを検証する.jsで指定:

    {
      path: '/',
      component: Home,
      name: 'Home',
      iconCls: 'fa fa-address-card',
      leaf: true,//      
      children: [
          { 
            path: '/chart', 
            component: Chart, 
            name: 'Chart', 
            iconCls: 'el-icon-s-flag',
            meta: { //         meta:{requireAuth: true}
             requireAuth: true
            }
          }
      ]
    }

ユーザーがログインするかどうかはその状態を指定する必要があります.ユーザーがログインしたら、localStorageでLoginします.vueファイルでステータスを1として指定します.

            that.$axios({
              method: 'post',
              url: 'http://localhost:9999/article/check_login_status/',
              data: param
            })
            .then((res) => {
              if(res.data.ret){
                localStorage.setItem("islogin", 1); //       
                that.$router.push({path: "/table"});
              }else{
                that.$message('        ！');
                return false;
              }
            })
            .catch((e) => {
              console.log(err);
            });

終了するにはホームでvueで指定したステータスは0です.

localStorage.setItem("islogin", 0);

ルーティング・ブロックにはナビゲーション・ガードが必要です.キー・コードは次のとおりです.

router.beforeEach((to, from, next) => {
  let islogin = localStorage.getItem("islogin");
  islogin = Boolean(Number(islogin));

  if(to.path == "/login"){
    if(islogin){
      next("/table");
    }else{
      next();
    }
  }else{
    // requireAuth:                    
    if(to.meta.requireAuth && islogin) {
      next();
    }else{
      next("/login");
    }
  }
})

すべてのコード:
router/index.js:

import Vue from 'vue'
import Router from 'vue-router'
const Home = () => import('@/components/HelloWorld')
const Badge = () => import('@/components/Badge')
const Progress = () => import('@/components/Progress')
const Table = () => import('@/components/Table')
const Tag = () => import('@/components/Tag')
const Chart = () => import('@/components/Chart')
const NotFound = () => import('@/components/NotFound')
const Login = () => import('@/components/Login')
const Tabs = () => import('@/components/Tabs')
const Rate = () => import('@/components/Rate')
const Form = () => import('@/components/Form')

Vue.use(Router)

let router = new Router({
  routes: [
    {
      path: '/',
      component: Home,
      name: '   ',
      iconCls: 'el-icon-s-flag',
      leaf: false,
      children: [
          { 
            path: '/tabs', 
            component: Tabs, 
            name: 'Tabs', 
            iconCls: 'el-icon-star-on',
            meta: { //         meta:{requireAuth: true}
             requireAuth: true
            }
          },
          { 
            path: '/rate', 
            component: Rate, 
            name: 'Rate', 
            iconCls: 'el-icon-star-on',
            meta: { //         meta:{requireAuth: true}
             requireAuth: true
            }
          }
      ]
    },
    {
      path: '/',
      component: Home,
      name: 'Home',
      iconCls: 'fa fa-address-card',
      leaf: true,//      
      children: [
          { 
            path: '/badge', 
            component: Badge, 
            name: 'Badge', 
            iconCls: 'el-icon-s-help',
            meta: { //         meta:{requireAuth: true}
             requireAuth: true
            }
          }
      ]
    },
    {
      path: '/',
      component: Home,
      name: 'Home',
      iconCls: 'fa fa-address-card',
      leaf: true,//      
      children: [
          { 
            path: '/table', 
            component: Table, 
            name: 'Table', 
            iconCls: 'el-icon-upload',
            meta: { //         meta:{requireAuth: true}
             requireAuth: true
            }
          }
      ]
    },
    {
      path: '/',
      component: Home,
      name: 'Home',
      iconCls: 'fa fa-address-card',
      leaf: true,//      
      children: [
          { 
            path: '/tag', 
            component: Tag, 
            name: 'Tag', 
            iconCls: 'el-icon-s-cooperation',
            meta: { //         meta:{requireAuth: true}
             requireAuth: true
            }
          }
      ]
    },
    {
      path: '/',
      component: Home,
      name: 'Home',
      iconCls: 'fa fa-address-card',
      leaf: true,//      
      children: [
          { 
            path: '/progress', 
            component: Progress, 
            name: 'Progress', 
            iconCls: 'el-icon-s-order',
            meta: { //         meta:{requireAuth: true}
             requireAuth: true
            }
          }
      ]
    },
    {
      path: '/',
      component: Home,
      name: 'Home',
      iconCls: 'fa fa-address-card',
      leaf: true,//      
      children: [
          { 
            path: '/chart', 
            component: Chart, 
            name: 'Chart', 
            iconCls: 'el-icon-s-flag',
            meta: { //         meta:{requireAuth: true}
             requireAuth: true
            }
          }
      ]
    },
    {
      path: '/',
      component: Home,
      name: 'Home',
      iconCls: 'fa fa-address-card',
      leaf: true,//      
      children: [
          { 
            path: '/form', 
            component: Form, 
            name: 'Form', 
            iconCls: 'el-icon-s-flag',
            meta: { //         meta:{requireAuth: true}
             requireAuth: true
            }
          }
      ]
    },
    {
      path: '/login',
      name: 'Login',
      component: Login,
      hidden: true,
      meta: { //         meta:{requireAuth: true}
       requireAuth: true
      }
    },
    {
      path: '*',
      hidden: true,
      redirect: { path: '/404' }
    },
    {
      path: '/404',
      hidden: true,
      name: '',
      component: NotFound
    }
  ]
})

export default router

router.beforeEach((to, from, next) => {
  let islogin = localStorage.getItem("islogin");
  islogin = Boolean(Number(islogin));

  if(to.path == "/login"){
    if(islogin){
      next("/table");
    }else{
      next();
    }
  }else{
    // requireAuth:                    
    if(to.meta.requireAuth && islogin) {
      next();
    }else{
      next("/login");
    }
  }
})

Login.vue:

  export default {
    data() {
      return {
        ruleForm: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            { required: true, message: '      ', trigger: 'blur' },
            { min: 3, max: 5, message: '    3   5    ', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '     ', trigger: 'blur' },
            { min: 3, max: 8, message: '    3   8    ', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        let that = this;

        let param = new URLSearchParams();
        param.append('username', that.ruleForm.username);
        param.append('password', that.ruleForm.password);

        this.$refs[formName].validate((valid) => {
          if (valid) {
            that.$axios({
              method: 'post',
              url: 'http://localhost:9999/article/check_login_status/',
              data: param
            })
            .then((res) => {
              if(res.data.ret){
                localStorage.setItem("islogin", 1);
                console.log(localStorage.getItem("islogin"));
                that.$router.push({path: "/table"});
              }else{
                that.$message('        ！');
                return false;
              }
            })
            .catch((e) => {
              console.log(err);
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }

Home.vue:

import {mapState, mapGetters, mapActions} from 'vuex'

export default {
  name: 'App',
  methods: {
      handleOpen(key, keyPath) {
        //console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        //console.log(key, keyPath);
      },
      ...mapActions('People', ['asyncSetName']),
      asyncSetAge(){
          this.$store.dispatch("People/asyncSetAge", 1);
      },
      asyncSetAddress(){
          this.$store.dispatch("People/asyncSetAddress", "      ");
      },
      asyncSetJob(){
          this.$store.dispatch("People/asyncSetJob", "P9");
      },
      loginOut(){
          localStorage.setItem("islogin", 0);
          this.$router.push("/login");
      }
  },
  computed: {
    ...mapState('People', ['name', 'age', 'address', 'job']),
    ...mapState('Product', {
      productName: 'name',
      count: 'count',
      price(state){return state.price},
      mount: state => state.mount
    }),
  }
}

djangoコード:views.py

@csrf_exempt
def check_login_status(request):
    return_dict = {"ret": False}

    if request.method == "POST":
        username = request.POST.get('username')
        password = request.POST.get('password')
        if username == 'admin' and password == '123456':
            return_dict['ret'] = True

    return HttpResponse(json.dumps(return_dict), content_type="application/json")