首页 编程语言正文

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

虾米姐 阅读：684 2021-03-31 16:52: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 中的 user 对象。

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

 

标签:VUE
声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
关注我们

一个IT知识分享的公众号

友情链接IM LINKS