ログインに成功すると token を取得できて 以降、認証が必要な API と通信する際は header に token をセットする、という想定です ちなみにバックエンドの API は Rails で作っています。 Rails でトークン認証 API を 15 分で実装する ディレクトリ構成 store の使い方が肝でしょうか うーん、状態管理って難しいですね src/ ├── App.vue ├── assets │ └── logo.png ├── components │ ├── error.vue │ ├── login.vue │ ├── logout.vue │ ├── menu.vue │ └── top.vue ├── lang │ ├── index.js │ └── messages.json # エラーメッセージ等、文言をここに ├─
![Vue.js で簡単なログイン画面 (トークン認証) を作ってみた - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/06255d73a819937d5b6855d78161600ce6ec53f7/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9VnVlLmpzJTIwJUUzJTgxJUE3JUU3JUIwJUExJUU1JThEJTk4JUUzJTgxJUFBJUUzJTgzJUFEJUUzJTgyJUIwJUUzJTgyJUE0JUUzJTgzJUIzJUU3JTk0JUJCJUU5JTlEJUEyJTIwJTI4JUUzJTgzJTg4JUUzJTgzJUJDJUUzJTgyJUFGJUUzJTgzJUIzJUU4JUFBJThEJUU4JUE4JUJDJTI5JTIwJUUzJTgyJTkyJUU0JUJEJTlDJUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgxJTlGJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1jN2E4YTczODc3MzE3ZWU0ZDg0MzcyY2Q4ODBkNjJhNw%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwa3VtYWdhaWFzJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0yYzc0OTY4ZjYzYThlOGI2NzQ2NzUyZGFmNGU0YzZhYg%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Db0af79173744b3ed3ecd930ed39dae04)