【筆記】vue+springboot前後端分離實現token登入驗證和狀態儲存的簡單實現方案
阿新 • • 發佈:2019-12-01
簡單實現
token可用於登入驗證和許可權管理。
大致步驟分為:
- 前端登入,post使用者名稱和密碼到後端。
- 後端驗證使用者名稱和密碼,若通過,生成一個token返回給前端。
- 前端拿到token用vuex和localStorage管理,登入成功進入首頁。
- 之後前端每一次許可權操作如跳轉路由,都需要判斷是否存在token,若不存在,跳轉至登入頁。
- 前端之後的每一個對後端的請求都要在請求頭上帶上token,後端檢視請求頭是否有token,拿到token檢查是否過期,返回對應狀態給前端。
若token已過期,清除token資訊,跳轉至登入頁。
具體程式碼如下:前端
- 登入頁
<template> <div class="signin-form"> <h3 class="sign-title">ticket-sys 登入</h3> <div> <el-form :model="loginForm" :rules="rules" status-icon ref="ruleForm" class="demo-ruleForm"> <el-form-item prop="username"> <el-input v-model="loginForm.username" autocomplete="off" placeholder="使用者名稱" prefix-icon="el-icon-user-solid" ></el-input> </el-form-item> <el-form-item prop="password"> <el-input type="password" v-model="loginForm.password" autocomplete="off" placeholder="請輸入密碼" prefix-icon="el-icon-lock" ></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm" id="login-btn">登入</el-button> </el-form-item> </el-form> </div> </div> </template> <script> import api from '../constant/api'; import {mapMutations} from "vuex"; export default { name: 'login', data() { return { loginForm:{ username:'', password:'' }, userToken:'', rules:{ username:[ { required: true, message: '請輸入使用者名稱', trigger: 'blur' }, ], password:[ { required: true, message: '請輸入密碼', trigger: 'blur' }, ] } } }, methods: { ...mapMutations(['changeLogin']), submitForm() { let v=this; this.$axios({ method: 'post', url: api.base_url+'/user/login', data:{ 'username':v.loginForm.username, 'password':v.loginForm.password } }).then(function(res){ console.log(res.data); v.userToken = 'Bearer ' + res.data.token; // 將使用者token儲存到vuex中 v.changeLogin({ Authorization:v.userToken }); v.$router.push('/home'); v.$message('登入成功'); }).catch(function(err){ console.log("err",err); v.$message('密碼或使用者名稱錯誤'); }) } } } </script> <style scoped>...</style>
- vuex狀態管理
/store/index.js
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { // 儲存token Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : '' }, mutations: { // 修改token,並將token存入localStorage changeLogin (state, user) { state.Authorization = user.Authorization; localStorage.setItem('Authorization', user.Authorization); } } }); export default store;
- 路由守衛
/router/index.js
import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/home', name: 'home', component: Home, } , { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: function () { return import(/* webpackChunkName: "about" */ '../views/About.vue') } }, { path:'/login', name:'login', component:function () { return import('../views/Login.vue'); } } ] const router = new VueRouter({ <template> <div class="home"> <el-container> <!-- <Header/>--> <!-- <el-main>首頁</el-main>--> <el-button @click="exit">退出登入</el-button> <el-button @click="test">攜帶token的測試請求</el-button> </el-container> </div> </template> <script> // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue' import Header from "../components/Header"; import api from "../constant/api"; export default { name: 'home', components: { Header, HelloWorld }, methods:{ exit(){ localStorage.removeItem('Authorization'); this.$router.push('/login'); }, test(){ this.$axios({ method: 'get', url: api.base_url+'/user/test', }).then(function(res){ console.log("res",res); }).catch(function(err){ console.log("err",err); }) } } } </script> <style>...</style> mode: 'history', base: process.env.BASE_URL, routes }); // 導航守衛 // 使用 router.beforeEach 註冊一個全域性前置守衛,判斷使用者是否登陸 router.beforeEach((to, from, next) => { if (to.path === '/login') { next(); } else { let token = localStorage.getItem('Authorization'); if (token === 'null' || token === '') { next('/login'); } else { next(); } } }); export default router
- 主檔案中註冊並新增攔截器
/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios' ;
import Vuex from 'vuex' //引入狀態管理
Vue.prototype.$axios= axios ;
Vue.use(Vuex) ;
Vue.config.productionTip = false
Vue.use(ElementUI)
//這裡要匯入store
import store from "./store";
// 新增請求攔截器,在請求頭中加token
axios.interceptors.request.use(
config => {
if (localStorage.getItem('Authorization')) {
config.headers.Authorization = localStorage.getItem('Authorization');
}
return config;
},
error => {
return Promise.reject(error);
});
new Vue({
//這裡要配置store
router, store:store,
render: function (h) { return h(App) }
}).$mount('#app')
- home頁面
<template>
<div class="home">
<el-container>
<!-- <Header/>-->
<!-- <el-main>首頁</el-main>-->
<el-button @click="exit">退出登入</el-button>
<el-button @click="test">攜帶token的測試請求</el-button>
</el-container>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import Header from "../components/Header";
import api from "../constant/api";
export default {
name: 'home',
components: {
Header,
HelloWorld
},
methods:{
exit(){
//退出登入,清空token
localStorage.removeItem('Authorization');
this.$router.push('/login');
},
test(){
this.$axios({
method: 'get',
url: api.base_url+'/user/test',
}).then(function(res){
console.log("res",res);
}).catch(function(err){
console.log("err",err);
})
}
}
}
</script>
<style>...</style>
後端
- 登入controller
package com.zxc.ticketsys.controller;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.web.bind.annotation.*;
import java.util.HashMap;
import java.util.Map;
@RestController
@RequestMapping("/user")
public class UserController{
@RequestMapping(value = "/login",method = RequestMethod.POST)
@ResponseBody
public String login(@RequestHeader Map<String,Object> he,@RequestBody Map<String,Object> para) throws JsonProcessingException {
System.out.println(he);
String username=(String)para.get("username");
String password=(String)para.get("password");
HashMap<String,Object> hs=new HashMap<>();
hs.put("token","token"+username+password);
ObjectMapper objectMapper=new ObjectMapper();
return objectMapper.writeValueAsString(hs);
}
@RequestMapping(value = "/test",method = RequestMethod.GET)
@ResponseBody
public String test(@RequestHeader Map<String,Object> he) throws JsonProcessingException {
System.out.println(he);
HashMap<String,Object> hs=new HashMap<>();
ObjectMapper objectMapper=new ObjectMapper();
return objectMapper.writeValueAsString(hs);
}
}
測試
- 登入
此時後臺的請求頭:
{host=localhost:8088, connection=keep-alive, accept=application/json, text/plain, */*, origin=http://localhost:8080, user-agent=Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36, sec-fetch-site=same-site, sec-fetch-mode=cors, referer=http://localhost:8080/home, accept-encoding=gzip, deflate, br, accept-language=zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7}
- 登入成功,進入home頁面
後端返回的token:
- 前端持有token,訪問測試介面
後端收到請求頭:
{host=localhost:8088, connection=keep-alive, accept=application/json, text/plain, */*, origin=http://localhost:8080, authorization=Bearer tokenadminadmin, user-agent=Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36, sec-fetch-site=same-site, sec-fetch-mode=cors, referer=http://localhost:8080/home, accept-encoding=gzip, deflate, br, accept-language=zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7}
帶有token,可以進行驗證
- 退出登入,清空token
後臺實際應用
在實際的應用中,一般需要一個生成token的工具類和一個攔截器對請求進行攔截。
- token生成工具類
/utils/TokenUtil.java
package com.zxc.ticketsys.utils;
import com.auth0.jwt.JWT;
import com.auth0.jwt.JWTVerifier;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.interfaces.DecodedJWT;
import com.zxc.ticketsys.model.User;
import java.util.Date;
public class TokenUtil {
private static final long EXPIRE_TIME= 10*60*60*1000;
private static final String TOKEN_SECRET="txdy"; //金鑰鹽
/**
* 簽名生成
* @param user
* @return
*/
public static String sign(User user){
String token = null;
try {
Date expiresAt = new Date(System.currentTimeMillis() + EXPIRE_TIME);
token = JWT.create()
.withIssuer("auth0")
.withClaim("username", user.getUsername())
.withExpiresAt(expiresAt)
// 使用了HMAC256加密演算法。
.sign(Algorithm.HMAC256(TOKEN_SECRET));
} catch (Exception e){
e.printStackTrace();
}
return token;
}
/**
* 簽名驗證
* @param token
* @return
*/
public static boolean verify(String token){
try {
JWTVerifier verifier = JWT.require(Algorithm.HMAC256(TOKEN_SECRET)).withIssuer("auth0").build();
DecodedJWT jwt = verifier.verify(token);
System.out.println("認證通過:");
System.out.println("username: " + jwt.getClaim("username").asString());
System.out.println("過期時間: " + jwt.getExpiresAt());
return true;
} catch (Exception e){
return false;
}
}
}
- 攔截器類
/interceptor/TokenInterceptor.java
package com.zxc.ticketsys.interceptor;
import com.alibaba.fastjson.JSONObject;
import com.zxc.ticketsys.utils.TokenUtil;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@Component
public class TokenInterceptor implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response,Object handler)throws Exception{
if(request.getMethod().equals("OPTIONS")){
response.setStatus(HttpServletResponse.SC_OK);
return true;
}
response.setCharacterEncoding("utf-8");
String token = request.getHeader("token");
if(token != null){
boolean result = TokenUtil.verify(token);
if(result){
System.out.println("通過攔截器");
return true;
}
}
response.setCharacterEncoding("UTF-8");
response.setContentType("application/json; charset=utf-8");
try{
JSONObject json = new JSONObject();
json.put("msg","token verify fail");
json.put("code","50000");
response.getWriter().append(json.toJSONString());
System.out.println("認證失敗,未通過攔截器");
}catch (Exception e){
e.printStackTrace();
response.sendError(500);
return false;
}
return false;
}
}
- 配置攔截器
/config/WebConfiguration.java
注意最好寫在一個配置類裡,且WebMvcConfigurationSupport和WebMvcConfigurerAdapter不要同時存在
這裡包括處理跨域的配置,而且全部改為implements WebMvcConfigurer介面
package com.zxc.ticketsys.config;
import com.zxc.ticketsys.interceptor.TokenInterceptor;
import org.springframework.context.annotation.Configuration;
import org.springframework.scheduling.concurrent.ConcurrentTaskExecutor;
import org.springframework.web.servlet.config.annotation.*;
import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.Executors;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
* 跨域請求支援/token攔截
* tip:只能寫在一個配置類裡
*/
@Configuration
public class WebConfiguration implements WebMvcConfigurer {
private TokenInterceptor tokenInterceptor;
//構造方法
public WebConfiguration(TokenInterceptor tokenInterceptor){
this.tokenInterceptor = tokenInterceptor;
}
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowCredentials(true)
.allowedHeaders("*")
.allowedMethods("*")
.allowedOrigins("*");
}
@Override
public void configureAsyncSupport(AsyncSupportConfigurer configurer){
configurer.setTaskExecutor(new ConcurrentTaskExecutor(Executors.newFixedThreadPool(3)));
configurer.setDefaultTimeout(30000);
}
@Override
public void addInterceptors(InterceptorRegistry registry){
List<String> excludePath = new ArrayList<>();
//排除攔截,除了註冊登入(此時還沒token),其他都攔截
excludePath.add("/user/register"); //登入
excludePath.add("/user/login"); //註冊
excludePath.add("/static/**"); //靜態資源
excludePath.add("/assets/**"); //靜態資源
registry.addInterceptor(tokenInterceptor)
.addPathPatterns("/**")
.excludePathPatterns(excludePath);
WebMvcConfigurer.super.addInterceptors(registry);
}
}
- 控制器類
package com.zxc.ticketsys.controller;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zxc.ticketsys.model.User;
import com.zxc.ticketsys.utils.TokenUtil;
import org.springframework.web.bind.annotation.*;
import java.util.HashMap;
import java.util.Map;
@RestController
@RequestMapping("/user")
public class UserController{
@RequestMapping(value = "/login",method = RequestMethod.POST)
@ResponseBody
public String login(@RequestBody Map<String,Object> para) throws JsonProcessingException {
String username=(String)para.get("username");
String password=(String)para.get("password");
String token= TokenUtil.sign(new User(username,password));
HashMap<String,Object> hs=new HashMap<>();
hs.put("token",token);
ObjectMapper objectMapper=new ObjectMapper();
return objectMapper.writeValueAsString(hs);
}
@RequestMapping(value = "/test",method = RequestMethod.POST)
@ResponseBody
public String test(@RequestBody Map<String,Object> para) throws JsonProcessingException {
HashMap<String,Object> hs=new HashMap<>();
hs.put("data","data");
ObjectMapper objectMapper=new ObjectMapper();
return objectMapper.writeValueAsString(hs);
}
}
- 測試
- 登入
成功登入,獲得token。
- 不帶token訪問test介面
被攔截,訪問失敗。
帶有效token訪問test介面
訪問成功,獲得資料。
完整專案程式碼
github