VUE路由守卫_权限验证

引言:

       本文在利用SpringBoot和Vue实现前后端分离一文的基础上追加的路由守卫;未登录时会限制访问某些页面(前台控制),与之前的Shiro不同;

1. 使用场景

在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下:

  1. 首次登录的时,前端调后端的登录接口,发送输入框中的用户名和密码;
  2. 后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token(令牌相当于一个门牌,如返回对象);
  3. 前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面
  4. 前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面
  5. 每次调后端接口,都要在请求头中加token
  6. 后端判断请求头中有无token,有token,就拿到token并验证token,验证成功就返回数据,验证失败(例如:token过期)就返回401,请求头中没有token也返回401
  7. 如果前端拿到状态码为401,就清除token信息并跳转到登录页面(首页)

2. 登录页面实现

  1. 通过this.ruleForm2.name获取输入框的name值,将输入框中的name通过链接传入后台;
  2. 后台从数据库中查出对应的字段,返回状态码以及值;
  3. 通过response.data.data.age(没有密码字段用年龄代替)获取数据库的值,与输入框中的作对比,一致进行下一步;
  4. 在前端写入用户状态信息到localStorage中,localStorage.setItem(“Authorer”, response.data.data.name);
  5. 登录成功跳转主页否则跳转初始页;
<template>
  <!-- 视图显示部分-->
  <div>
    <h2>登录页面</h2>
    <div id="inputStyle" class="inputClass">
      <el-form
        :model="ruleForm2"
        status-icon
        :rules="rules2"
        ref="ruleForm2"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="name">
          <el-input type="text" v-model="ruleForm2.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input v-model.number="ruleForm2.code"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
          <el-button @click="resetForm('ruleForm2')">重置</el-button>
          <el-button type="text">
            <router-link to="/">回到首页</router-link>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// 编写js行为
export default {
  data() {
    return {
      ruleForm2: {
        name: "",
        pass: "",
        code: "",
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$axios
        .post("loginSys?name=" + this.ruleForm2.name)
        .then((response) => {
          if (response.data.statusCode == 200) {
            console.log(response.data.data);
            if (this.ruleForm2.pass == response.data.data.age) {
              //在前端写入用户状态信息到localStorage中
              localStorage.setItem('Authorer',response.data.data.name);
              //登录成功
              // 导航到后台主页
              this.$router.push("/main"); //使用编程式动态路由
            } else {
              this.$router.push("/");
            }
          }
        })
        .catch((error)=>{
            alert(error)
        });
      this.$message(this.ruleForm2.name);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.inputClass {
  padding: 20px;
  width: 300px;
  height: 250px;
  margin: 0 auto;
}
.Codename {
  margin-right: 227px;
  padding: 10px;
  font-family: PingFang SC;
}
.name {
  margin-left: -237px;
  padding: 10px;
  font-style: inherit;
}
</style>

3. 路由守卫

  1. 未登录时:对登录页面、初始页不拦截,其他页面拦截;
  2. 登录状态:可以访问任何页面
  3. 通过**localStorage.getItem(‘Authorer’)**获取localStorage中的值,如果有值继续访问,没有则跳转登录界面;

重:

  • var会将作用域放大全局,let只是局部的作用域
  • mode: ‘history’:加上访问时可以不要#,直接从后台获得没有缓冲,减轻前台的负荷;
import Vue from 'vue'
import Router from 'vue-router'
import IndexView from '@/view/index'
import MainView from '@/view/admin/main'
import LoginView from '@/view/login'
import WelcomeView from '@/view/admin/welcome'
import StudentView from '@/view/admin/student'
import StudentSex from '@/view/admin/studentSex'
import StudentSchool from '@/view/detailSchool'
Vue.use(Router)

const routes = [
  {//前台首页
    path: '/',
    name: 'IndexView',
    component: IndexView
  },
  { path: "/showdetail", component: StudentSchool },
  {//后台主页面
    path: "/main",
    component: MainView,
    children: [
      { path: "/", component: WelcomeView },
      { path: "/showStudent", component: StudentView },
      { path: "/showsex", component: StudentSex },
    ]
  },
  {//登录页
    path: "/login",
    component: LoginView,
  }
]

const router = new Router({
  //可以丢掉#,有#采用页面缓冲的方式,无#从后台得到
  mode: 'history',
  routes
})
// 
router.beforeEach((to, from, next) => {
  //打印来的路径和去的路径
  console.log(to.path + "  from:" + from.fullPath)
  //对于登录页面不拦截
  if (to.path === '/login' || to.path === '/showdetail' || to.path === '/') {
    // 接下来的函数
    next();
  } else {
    //var会将作用域放大,let只是局部的作用域
    let username = localStorage.getItem('Authorer');
    console.username;
    //用户访问认证后页面时 必须校验用户信息是否存在,不存在去登陆页
    if (username === null || username === '') {
      next('/');
    } else {
      next();
    }
  }
});
export default router;

4. 在main.js中加入axios拦截

  1. Authorer中的信息写入头部信息Authorization中;
  2. 后台申请一个HttpServletRequest接收Authorization值,并进行判断;
//引用axios,设置基础的url
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8088/api'

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  //如果用户信息存在,将用户状态写入request的headers中key为Authorization ;value为localStorage.getItem('Authorer')
  if (localStorage.getItem('Authorer')) {
    config.headers.Authorization = localStorage.getItem('Authorer');
  }
  // 在发送请求之前做些什么    
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});
Logo

前往低代码交流专区

更多推荐