token是携带在路径里的,我不用vuex,在premission.js中进行逻辑判定,然后在min.js中引入premission.js
时间: 2024-10-27 21:06:47 浏览: 17
js-cookie.js
如果你选择在URL路径中携带token并在`permission.js`中进行逻辑判断,而不是使用Vuex进行状态管理,可以按照以下步骤操作:
1. **URL参数解析**:
在`main.js`或类似入口文件中,监听路由变化,从URL查询参数或哈希段提取token。
```javascript
import Vue from 'vue'
import App from './App.vue'
import permission from './permission.js' // 引入你的权限判断函数
Vue.config.productionTip = false
new Vue({
el: '#app',
render: h => h(App),
created() {
let tokenFromUrl = decodeURIComponent(window.location.search.substring(1)) // 假设token在查询参数中
permission(tokenFromUrl) // 调用你的permission.js中的函数进行判断
},
})
```
2. **permission.js**:
在这个文件中,编写接收token并验证的逻辑,通常涉及检查token的有效性,比如检查其有效期、校验签名校验等。
```javascript
export function permission(token) {
if (!token) {
// 如果没有token,可能是未登录或登录已失效,可以重定向到登录页
window.location.href = '/login?redirect=' + encodeURIComponent(window.location.pathname);
} else {
// 使用接口验证token
fetch('your-auth-api/check-token', {
method: 'GET',
headers: {
Authorization: `Bearer ${token}`
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
// 如果验证成功,后续可以根据需要进行授权控制
} else {
// 验证失败,处理相应逻辑
window.location.href = '/unauthorized';
}
})
.catch(error => {
// 处理网络请求错误或token验证失败
console.error('Token validation error:', error);
window.location.href = '/login'; // 返回登录页
});
}
}
```
3. **处理未授权**:
当验证失败或者token无效时,可以根据需求将用户重定向到相应的未授权页面(`/unauthorized`)或者登录页(`/login`)。
阅读全文