VUE路由守卫_前端实现权限验证

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