VUE 项目集成Vuex，实现简单用户登入页面登入权限认证

末蓝、 2023-10-10 10:43 25阅读 0赞

第一步：VUE 项目安装Vuex 模块

打开cmd 窗口指令，切换至VUE 项目所在路径地址，执行如下指令：

cnpm install vuex --save

在 VUE项目src 文件夹下新建一个文件夹 store，并在该目录下新建 index.js 文件，在该文件中引入 vue 和 vuex，代码如下：

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)

index.js 模块核心功能描述：设置用户是否登入的状态值和获取用户是否登入状态值。核心代码如下：

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
      state: {
        user: {
          username: window.localStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).username
        }
      },
      mutations: {
        login (state, user) {
          state.user = user
          window.localStorage.setItem('user', JSON.stringify(user))
        }
      }
    })
    
    export default store

第二步：修改路由配置：

修改一下 `src\router\index.js，`在需要拦截的路由中加一条元数据，设置一个 `requireAuth` 字段如下：

{
          path: '/index',
          name: 'AppIndex',
          component: AppIndex,
          meta: {
            requireAuth: true
          }
        }

完整代码：`src\router\index.js`

import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    // 导入刚才编写的组件
    import AppIndex from '@/components/home/AppIndex'
    import Login from '@/components/Login'
    
    Vue.use(Router)
    
    export default new Router({
      mode: 'history',
      routes: [
        // 下面都是固定的写法
        {
          path: '/login',
          name: 'Login',
          component: Login
        },
        {
          path: '/index',
          name: 'AppIndex',
          component: AppIndex,
          meta: {
            requireAuth: true
          }
        }
      ]
    })

第三步：钩子函数判断路径是否拦截请求地址

钩子函数：在某些时候会被调用的函数。我们这里使用 router.beforeEach() = 在访问每一个路由前调用

打开 `src\main.js` ，首先添加对 `store` 的引用

// 引入vuex
    import store from './store'

修改 Vue 对象里的内容

new Vue({
      el: '#app',
      router,
      store,
      components: { App },
      template: '<App/>'
    })

编写router.beforeEach() 函数：

/* 钩子函数:判断访问的路径是否需要登入*/
    router.beforeEach((to, from, next) => {
        if (to.meta.requireAuth) {
          if (store.state.user.username) {
            next()
          } else {
            next({
              path: 'login',
              query: {redirect: to.fullPath}
            })
          }
        } else {
          next()
        }
      }
    )

功能说明：首先判断访问的路径是否需要登录，如果需要，判断 `store` 里有没有存储 `user` 的信息，如果存在，则放行，否则跳转到登录页面，并存储访问的页面路径（以便在登录后跳转到访问页）

完整main.js 代码:

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    // 引入vuex
    import store from './store'
    // 引入ElementUI
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    // 设置反向代理，前端请求默认发送到 http://localhost:8443/api
    var axios = require('axios')
    axios.defaults.baseURL = 'http://localhost:7080/api'
    // 全局注册，之后可在其他组件中通过 this.$axios 发送数据
    Vue.prototype.$axios = axios
    
    Vue.config.productionTip = false
    Vue.use(ElementUI)
    /* eslint-disable no-new */
    /* 钩子函数:判断访问的路径是否需要登入*/
    router.beforeEach((to, from, next) => {
        if (to.meta.requireAuth) {
          if (store.state.user.username) {
            next()
          } else {
            next({
              path: 'login',
              query: {redirect: to.fullPath}
            })
          }
        } else {
          next()
        }
      }
    )
    new Vue({
      el: '#app',
      router,
      store,
      components: { App },
      template: '<App/>'
    })

第四步:修改Login.vue 组件

业务逻辑描述：

1、用户输入用户名和密码点击登入，向后端发送相关数据。

2、等待后端返回成功时，触发 `store` 中的 `login()` 方法，把 `loginForm` 对象传递给 `store` 中的 `use`r 对象。

3、获取登录前页面的路径并跳转，如果该路径不存在，则跳转到首页

核心代码：

<template>
      <body id="poster">
      <el-form class="login-container" label-position="left"
               label-width="0px">
        <h3 class="login_title">系统登录</h3>
        <el-form-item>
          <el-input type="text" v-model="loginForm.username"
                    auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input type="password" v-model="loginForm.password"
                    auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item style="width: 100%">
          <el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="login">登录</el-button>
        </el-form-item>
      </el-form>
      </body>
    </template>
    
    <script>
        export default {
            name: "Login",
          data () {
            return {
              loginForm: {
                username: '',
                password: ''
              },
              responseResult: []
            }
          },
          methods: {
            login () {
              var _this = this
              console.log(this.$store.state)
              this.$axios
                .post('/login', {
                  username: this.loginForm.username,
                  password: this.loginForm.password
                })
                .then(successResponse => {
                  if (successResponse.data.code === 200) {
                    // store 值存储
                    _this.$store.commit('login', _this.loginForm)
                    var path = this.$route.query.redirect
                    this.$router.replace({path: path === '/' || path === undefined ? '/index' : path})
                  }
                })
                .catch(failResponse => {
                })
            }
          }
        }
    </script>
    
    <style scoped>
      #poster {
        background-position: center;
        height: 100%;
        width: 100%;
        background-size: cover;
        position: fixed;
      }
      body{
        margin: 0px;
      }
      .login-container {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 90px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
      }
      .login_title {
        margin: 0px auto 40px auto;
        text-align: center;
        color: #505458;
      }
    </style>

SpringBoot 后端代码添加如下功能：

1、创建登入拦截器：实现访问请求地址拦截，判断是不是需要进行拦截的请求的地址：

package com.zzg.wj.interceptor;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.HttpSession;
    
    import org.apache.commons.lang.StringUtils;
    import org.springframework.web.servlet.HandlerInterceptor;
    
    import com.zzg.wj.domain.AuthUser;
    /**
     * 登入拦截器
     * @author Administrator
     *
     */
    public class LoginInterceptor implements HandlerInterceptor {
    
    	@Override
    	public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
    			throws Exception {
    		// TODO Auto-generated method stub
    		HttpSession session = request.getSession();
            String contextPath=session.getServletContext().getContextPath();
            String[] requireAuthPages = new String[]{
                    "index",
            };
    
            String uri = request.getRequestURI();
            // 指定字符串移除指定字符
            uri = StringUtils.remove(uri, contextPath+"/");
            String page = uri;
            if(begingWith(page, requireAuthPages)){
            	AuthUser user = (AuthUser) session.getAttribute("user");
                if(user==null) {
                	// 重定向登入页面
                	response.sendRedirect("login");
                    return false;
                }
            }
            return true;
    	}
    	// 判断请求路径是否为需要权限
    	private boolean begingWith(String page, String[] requiredAuthPages) {
            boolean result = false;
            for (String requiredAuthPage : requiredAuthPages) {
                if(StringUtils.startsWith(page, requiredAuthPage)) {
                    result = true;
                    break;
                }
            }
            return result;
        }
    
    	
    }

2、Web 配置类：配置cors 和注册拦截器

package com.zzg.wj.config;
    
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    import com.zzg.wj.interceptor.LoginInterceptor;
    
    /**
     * cros 跨域问题
     * @author Administrator
     *
     */
    @Configuration 
    public class CorsConfig implements WebMvcConfigurer {
    	@Override  
        public void addCorsMappings(CorsRegistry registry) {  
            registry.addMapping("/**")  
                    .allowedOrigins("*")  
                    .allowCredentials(true)  
                    .allowedMethods("GET", "POST", "DELETE", "PUT","PATCH")  
                    .maxAge(3600);  
        }  
    	
    	 	@Bean
    	    public LoginInterceptor getLoginIntercepter() {
    	        return new LoginInterceptor();
    	    }
    
    	    @Override
    	    public void addInterceptors(InterceptorRegistry registry){
    	        registry.addInterceptor(getLoginIntercepter()).addPathPatterns("/**");
    	    }
    
    }

效果演示:

运行前后端项目，访问 http://localhost:8080/index ，发现页面直接跳转到了 http://localhost:8080/login?redirect=%2Findex

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200103011324118.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70