vue寫的項目 中做單點登錄 獲取token需要通過客戶的固定地址https://XXXX.XX.XX.XX:8081/ombs/pages/gatemsg.html?appid=6&token=V1uRstCQVCR2Am64YDH6BEn(其中ombs/pages/gatemsg.html這個路徑不能動)來獲取token，再將token傳到第三方api來獲取一個有效的key，才能進行後續操作，但是項目中的vue-router直接配置path:'ombs/pages/gatemsg.html’本地開發不會報錯放到線上就會報錯解析錯誤，其他頁面訪問均正常，我猜測是nginx下訪問無法解析vue-route配置帶.html後綴路徑
解決辦法：再服務器上配置nginx去將路徑重定向並把token傳過來，在vue-router路由鉤子裏面去進行判斷
主要思路就是在nginx去將https://XXXX.XX.XX.XX:8081/ombs/pages/gatemsg.html?appid=6&token=V1uRstCQVCR2Am64YDH6BEn進行重定向
vue-router
import Vue from 'vue'
import Router from 'vue-router'
import axios from 'axios'
import store from '@/store/store.js'
Vue.use(Router)
const login=r=>require.ensure([],()=>r(require('@/pages/auth/login/login')))
var router = new Router({
mode: 'history',
routes: [
{
path: '/login',
name: 'login',
component: login
},{
path: '/single_sign_on'
},
]
})
// 配置路由權限
router.beforeEach((to, from, next) => {
let getTokenPath=to.path
console.log(to.path)
if(getTokenPath === '/single_sign_on'){//判斷是否是固定的權限訪問授權路由
let token = to.query.token
let appid = to.query.appid
if(token){
// 通過 token 訪問第三方api 獲取有效key進入首頁並將key存入localstorage 否則進入login
axios.get('/inapi/login/index',{
params:{
token:token,
appid:appid
}}).then(res => {
if(res.data.code === 0){
store.commit('set_xaiot_token_key',res.data.data.role)
next('/')
}else{
store.commit('set_xaiot_token_key','')
next('/login')
}
}).catch(res => {
console.log(res.data.msg,'error')
store.commit('set_xaiot_token_key','')
next('/login')
})
}else{
store.commit('set_xaiot_token_key','')
next('/login')
}
}
let xaiot_token_key=store.state.xaiot_token_key
if (to.meta.requireAuth) { // 判斷該路由是否需要登錄權限
if (xaiot_token_key) { // 判斷本地是否存在access_token
next()
} else {
// 未登錄,跳轉到登陸頁面，並且帶上 將要去的地址，方便登陸後跳轉。
store.commit('set_xaiot_token_key','')
next('/login')
}
} else {
next()
}
})
export default router
nginx.cof
server {
# HTTP configuration
listen 80 default_server;
#listen [::]:80 default_server;
# HTTPS configuration
#listen 443 ssl default_server;
#listen [::]:443 ssl default_server;
#ssl_certificate /etc/certs/server.crt;
#ssl_certificate_key /etc/certs/server.key;
server_name _;
charset utf-8;
location / {
root html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /ombs/pages {
alias html/ombs/pages/;
index gatemsg.html;
}
location /inapi/ {
#add_header 'Access-Control-Allow-Origin' '*';
#add_header 'Access-Control-Allow-Credentials' 'true';
#add_header 'Access-Control-Allow-Methods' '*';
proxy_pass http://172.18.0.125:3000/mock/62/xaiot-oss/api/inapi/;
}
}
gatemsg.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<script>
let searchHref = window.location.search.replace('?', '');
let params = searchHref.split('&');
let returnParam = {};
params.forEach(function(param) {
let paramSplit = param.split('=');
returnParam[paramSplit[0]] = paramSplit[1];
});
if (typeof(returnParam.token) !="undefined" )
window.location.href = `/single_sign_on?appid=6&token=${returnParam.token}`
else
window.location.href = `/single_sign_on`
</script>
</body>
</html>