Vue 关于路由安全卫士与判断登陆的用法详解 记录一下

看标题可以分为两部分，
1.首先路由安全卫士是干嘛的 。
路由安全卫士beforeEach，我个人理解为拦截普通用户查阅管理员能查阅的网页， 讲的通俗点就是 普通用户跟管理员的区别， 管理员能看全部 普通用户只能看局部。
2.其次，用户是否登录 。
我个人理解为就是判断你所输入的账号是否为管理员， 如果是的话那么设置了权限的网页就可以浏览 ，如果是普通用户那么就跳转404。
3. 那么应该怎么去实现呢？
4. 找到main.js 引入

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    if(JSON.parse(localStorage.getItem('islogin'))){ 
      next();
    }else {
      next({
        path:'/404'   //这段意思是 如果你没有登录 就看不到页面直接跳转404 
      })                     // 如果你用管理员的身份登录就可以看到页面
    }
  }
  else {
    next();
  }
  if(to.fullPath == "/login"){
    if(JSON.parse(localStorage.getItem('islogin'))){
      next({
        path:from.fullPath
      });
    }else {
      next();
    }
  }
});

5. 找到 router 里面的 index.js 就是放路由的文件

export default new Router({
  routes: [
    {
      path: "/login",        //登录页面
      component: login,
      meta:{}
    },
    {                               //这个是想要设置权限的页面
        path: '/jiaosemessage',     //名字这些随意  根据自己的文件名字命名
        component: resolve => require(['../components/shou/jiaosemessage/jiaosemessage.vue'], resolve),
        meta: {
          requireAuth: true,   //   这个写上， 意思是进入这个页面需要登录  
          title: '角色管理'
        }
      },
  ]
})

两个页面 即登录页面和自己想设置权限的页面 。
6. 找到Vuex 里面的 store.js 文件 没有的话就install一下吧

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
 
export default new Vuex.Store({
  state:{
    islogin:''   
  },
  mutations:{
  login:(state,n) => {          
    let islogin = JSON.parse(n);
    localStorage.setItem('islogin',JSON.stringify(islogin));
    state.islogin = islogin;
      }
},
  getters: {},
  actions: {}
})

引入以上字段 个人理解为 监测islogin的变化，以此表示在页面上显示登录还是已经登录
7. 接下来 就是在组件里 写下触发的方法

<template>
 <button  @click="dialogFormAdd()">登 录</button>
  <button  @click="dialogFormApp()">退 出 登 录</button>
 </template>
 <script>
 dialogFormAdd(){        
       var GOC = true;
        this.$store.commit("login", GOC);    
        this.$router.push("/home");   //跳转到你设置了权限的页面
         console.log("登录成功");
        },
   dialogFormApp(){             
     var GOC = false;
      this.$store.commit("login", GOC);
      this.$router.push("/login");
      console.log("退出登录");
   }
 </script>

这里贴 一个 带判断的带输入框的例子 还有本地localStorage变化的 小demo

<template>
   <div>
     <el-form :model="ruleForm" label-width="60px" ref="ruleForm">
            <el-form-item label="手机号">
              <el-input v-model="ruleForm.username" placeholder="请输入手机号码" clearable></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="ruleForm.password" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
          </el-form>
           <el-button @click="dialogFormAdd('formdong')" >登 录</el-button>
      </div>
</template>
<script>
export default {
  name: "login",
  data() {
    return {
      ruleForm: {
        username: "",
        password: ""
      },
    };
  },
  methods: {
    dialogFormAdd(formdong) {
      var name = this.ruleForm.username;
      var pass = this.ruleForm.password;
      if (name == "" || name == null) {
        this.$message.error("请输入用户名");
        return;
      } else if (pass == "" || pass == null) {
        this.$message.error("请悄悄地输入密码");
        return;
      }       //上面那段为校验  
      if (this.ruleForm.username == "123456" && this.ruleForm.password == "123456") { 
        var GOC = true;               //这里做了个判断 意思是只有密码账号都为123456 才能进入设置了权限的页面
        this.$store.commit("login", GOC);   //没有用后台，就直接写了段死的
        this.$router.push("/home");
        console.log("登陆成功");
      } else {        //这里意思 就是 密码账号随便填也能跳转  但进不去设置了权限的页面
        this.$router.push("/home");
      }
     }
    }
  }
</script>

登录成功为true 退出登录为false
8.最后，重新梳理一下 Vuex 控制登录的状态，路由安全卫士拦截没有权限的账号

个人理解 如有不足 望指出