vue 登录token的思路流程

在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下:

1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码

2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token

3、前端拿到token,将token存储到localStorage/cookie 和vuex中,并跳转路由页面

vuex 存不存都无所谓,个人感觉这里只为了store管理好看点而已。

4、前端每次跳转路由,就判断 localStroage/cookie  中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面

5、每次调后端接口,都要在请求头中加token

 

service.interceptors.request.use(
  config => {
    // do something before request is sent

    if (store.getters.token) {
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3中实现token的自动登录可以通过以下步骤: 1. 在用户登录成功后,将获取到的token存储到sessionStorage中,可以使用`sessionStorage.setItem('token', token)`来实现。 2. 在Vuex的store中,创建一个state属性来存储token,可以使用`state: { token: sessionStorage.getItem('token') || '' }`来初始化token的值。 3. 在main.js中使用导航守卫来进行路由跳转的判断。首先判断目标路由是否为登录页,如果是,则直接跳转。否则,从store中获取token的值,如果token为空,则跳转到登录页,否则继续跳转到目标路由。 4. 在登录页或任何需要验证登录状态的组件中,通过调用store中的token来判断用户是否已登录。如果token为空,则说明用户未登录,需要跳转到登录页。 以下是一个示例代码,演示了如何实现Vue3中的token自动登录: 在store/index.js中: ```javascript import { createStore } from 'vuex' const store = createStore({ state: { token: sessionStorage.getItem('token') || '' } }) export default store ``` 在main.js中: ```javascript import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' const app = createApp(App) app.use(router) app.use(store) router.beforeEach((to, from, next) => { if (to.path === '/login') { next() } else { const token = store.state.token if (token === '') { next('/login') } else { next() } } }) app.mount('#app') ``` 在登录组件中: ```vue <template> <div> <!-- 登录表单 --> <form> <!-- 表单输入项 --> </form> <!-- 登录按钮 --> <button @click="login">登录</button> </div> </template> <script> export default { methods: { login() { // 登录逻辑 // ... // 登录成功后将token存储到sessionStorage中 sessionStorage.setItem('token', token) // 跳转到其他页面 this.$router.push('/index') } } } </script> ``` 通过以上步骤,你可以在Vue3中实现token的自动登录功能。当用户成功登录并获取到token时,将token存储到sessionStorage中,并在每次路由跳转前检查token的值来判断用户是否已登录。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue实现token登录](https://blog.csdn.net/weixin_43896327/article/details/115244762)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值