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>